Menu
I want to be able to click anywhere inside the body except that one specific element. I can't find out what's wrong with the code I have done.
When I click on the one specific element .except inside body, I don't want it to hide but when I click on body it should hide.
HTML
<html>
<head>
<title>Click anywhere except that specific element</title>
</head>
<body id="wrapper">
<center>
<div id="except"></div>
</center>
</body>
</html>
JS
var body = document.getElementById('wrapper');
var except = document.getElementById('except');
if(body.addEventListener)
body.addEventListener("click", function(){bodyClick("yes")}, false);
else
body.attachEvent("onclick", bodyClick);
function bodyClick(clicked){
except.addEventListener("click", exceptClick,false);
function exceptClick(){
bodyClick("no");
if(clicked === "yes")
except.style.display = "none";
}
if(clicked === "yes")
except.style.display = "none";
else
except.style.display = "show";
}
Any help is appreciated. Forgive me for the incorrect formatting (it's my first post here). Thank You!
942
$(document). click(function (event) { $('#myDIV:visible'). hide(); });
click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
click(function() { $("#content"). addClass("mobile-open"); }); $(document). click(function(event){ if (event.target.id === 'site-nav') { } else { $("#content"). removeClass("mobile-open"); } }); });
You need to stopPropagation to the outer element.
Here's a simple illustration: http://jsfiddle.net/5mhqrhwk/3/
var body = document.getElementById('wrapper');
var except = document.getElementById('except');
body.addEventListener("click", function () {
alert("wrapper");
}, false);
except.addEventListener("click", function (ev) {
alert("except");
ev.stopPropagation(); //this is important! If removed, you'll get both alerts
}, false);
HTML:
<div id="wrapper">
<center>
<div id="except"></div>
</center>
</div>
Instead of stopping propagation on the except element, I'd prefer something like this:
var wrapper = document.querySelector('wrapper');
document.addEventListener('click', function(e) {
if ( !wrapper.contains(e.target) ) {
// Do something when user clicked outside of wrapper element
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With