I want to fix a problem I have attaching an onclick element to a div ( and only to it! )
Please look at following code :
<script>
function goToo(url,idd){
alert(idd);
if (idd=="onlyMe")
window.location=url;
}
</script>
<div id="onlyMe" onclick="javascript:goToo('http://www.google.com', this.id)" style="<-index:-150">
<form><input type="text" name="coap"></form>
<h3>This is an element where click should work!</h3>
<div id="notME">
<h3>In this point it should not work!</h3>
</div>
</div>
I want the onlick to be triggered only in the div clicking.
Please check the example live # http://modacalcio.com/HtmlProblemForm.html
The click is triggered everywhere, expecially in the form input.
Obiovusly I wish to use this without deleting onclick in children nodes, as they have their own onclick that still need to work
Also with jquery I have same problem
any help?
$('#onlyMe').on('click', function(evt) {
if ($(evt.target).parents('#notME').length === 0 && evt.target.id !== 'notME') {
location.href = "http://...";
}
});
example fiddle: http://jsfiddle.net/zhkr2/2/
the idea is to check if the event was triggered on #notME element or inside an element contained in #notME, so I check if an ancestor is that element
just give for 'div' some width
#onlyMe
{
width:
height:
}
and close the div properly .
Related
I have a div with contents in it:
<div class="block">
<img src='...'>
<span>...</span>
</div>
I set up a JavaScript Event Listener when someone clicks on the div:
document.body.addEventListener("click", function(e) {
if (e.target.tagName === 'DIV' && e.target.classList.contains("block")){
(code)
}
}
It works when I click on the area of the div that has no content. But it doesn't works, when I click to the image or to the text.
How can I get this at the whole div working?
The event.target is the element you clicked on. If you do not directly click on the div then your code will not match your tests because you are clicking on a child element.
So when you are using event delegation and you want to know if an element or one of its children is clicked on, you need to walk up the tree to see if it is that element. You can do that with closest
document.body.addEventListener("click", function(e) {
if (e.target.closest('div.block')) {
console.log('clicked', Date.now());
}
});
<h2>Example</h2>
<div class="block">
<img src='http://placekitten.com/g/200/300'>
<span>foo bar kitten</span>
</div>
Try to give an id to div and add your event listener to that.
<div id="myDiv" class="content">
// your content goes here
</div>
And in javascript
const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", (event) => {
// your function goes here
})
There are many ways you can do it. But In my opinion the best way is to make anything clickable in JS is use onClick() function. You can simply use onClick=functionName()
function changeBackground(){
let block = document.getElementsByClassName('block');
block[0].style.backgroundColor = "green";
}
.block{
height: 50px;
border : 1px solid;
}
<div class="block" onClick="changeBackground()">
<div>
welcome to SO. You can add the event listener on the div itself and then perform whatever code you like. The reason it doesn't work in your case is because you are adding the event listener to the whole body and thus as the event handler is called, it doesn't recognize the elements you are clicking on even if they are inside the div.
Try this instead:
document.querySelector('div#block').addEventListener("click", function(e) {
// code...
});
I have a div that has some anchors or buttons generated in it, depends on the situation, i need a foucsout event that would detect if some of the div elements got clicked, if not i need to do some logic
i tried this in the focusout event
$('.navigate-modules-li').find(':active').length == 0
and it works for chrome but not on firefox.
:focus and :selected did not work
any ideas? thanks.
Not a final solution since it is not completely clear what you are trying to achieve, but below is working example how to "mark" divs with something clicked inside and how to get them afterwards. Hope this will help you to find the way.
$(function() {
$('.navigate-modules-li > div > a').on('click', function() {
if (!$(this).parent().hasClass('clicked')) {
$(this).parent().addClass('clicked').css('background', 'green');
}
console.log('Divs clicked: ' + $('.navigate-modules-li > div.clicked').length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigate-modules-li">
<div>
Div 1
Click me or Click me
</div>
<div>
Div 2
Click me or Click me
</div>
<div>
Div 3
Click me or Click me
</div>
</div>
I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?
Try using tabindex attribute on your div, see:
Check this post for more information and demo.
I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.
Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()
I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
I have the following HTML code:
<div id='parentDiv'>
<div class='firstDiv'>
<div class='firstDivChild1'></div>
<div class='firstDivChild2'>
<div class='firstDivChild2_Child1'></div>
<div class='firstDivChild2_Child2'></div>
</div>
</div>
<div class='secondDiv'>
<div class='secondDivChild1'>
<div class='secondDivChild1_child'>
<div class='secondDivChild1_child_child'></div>
</div>
</div>
</div>
</div>
Now my requirement is when I click on any div I want to get an top most parent Id (i.e. parentDiv). Presently I'm using the below script to get parent Id:
<script type='text/javascript'>
$('div').click(function(e){
var parentDivId = (e.target).parentNode.id;
alert(parentDivId );
});
</script>
but it doesn't work. Can anyone correct this code to reach my requirement?
If that parent DIV is unique across document, then you just can refer to it by ID, i.e. $('#parentDiv'), but if it's not, then you should change your HTML and add to parentDiv some class (i.e. parentDiv), and you'll be able to refer to it by this expression $(this).parents('.parentDiv:first');
$('div').click(function() {
alert($(this).parents('div').last().attr('id'));
return false;
});
Live DEMO
then use the natural power of event bubbling. any descendant clicked will bubble up the event upwards (hence bubble) and will act as if the parent is clicked. so adding a click handler to the parent also does the same thing.
$('#parentDiv').on('click',function(){
var id = this.id
});
Try this little function :
$.fn.root = function() {
var $all = $( this[0] ).parents();
// omit "html", "body" and one index to the last item;
return $all.slice( $all.length - 3, $all.length - 2 );
};
Sample Usage :
$('input').click(function() {
alert($(this).root().prop('id'));
});
Simple working example using your HTML here
It is still not completely obvious what you're asking for, but based on a few of your comments, here's my best guess.
Using event bubbling, you can examine all clicks in your document and you then determine where the click originated with e.target and you can then figure out whether that click originated in your div tree or elsewhere:
$(document).click(function(e) {
// determine if click was in our div tree or not
if ($(event.target).closest("#parentDiv").length) {
// click was in our parentDiv tree
} else {
// click was not in our parentDiv tree
}
});
Regardless of where the click was located, you can get the top of your div tree id="parentDiv" at any time with this with this jQuery:
$("#parentDiv")
If, you just want the top-most div that is above what is clicked, no matter where the click is in the document, you can use event bubbling like this to get that:
$(document).click(function(e) {
e.stopPropagation();
var topMostDiv = $(e.target).parents("div").last();
// do whatever you want with topMostDiv here
});
I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?
Try using tabindex attribute on your div, see:
Check this post for more information and demo.
I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.
Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()
I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});