Javascript: Click anywhere in body except the one element inside it
Question
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!
4 answers
solution1
24 ACCPTED 2015-11-11 18:34:08
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>
solution2
3 2015-11-11 18:29:11
You don't really need any flags to do this. Just listen on body click and do different thing depending on the item clicked (event.target). This code should do exactly what you wanted (based on your code):
var body = document.getElementById('wrapper');
var except = document.getElementById('except');
if(body.addEventListener)
body.addEventListener("click", bodyClick, false);
else
body.attachEvent("onclick", bodyClick);
function bodyClick(event){
if(event.target != except)
except.style.display = "none";
}
solution3
1 2020-10-05 11:46:18
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
}
})
solution4
0 2015-11-11 18:27:26
You are missing one piece to this. You need to stop the event from bubbling up from the except object if it is clicked
except.addEventListener("click", function(event){event.stopPropagation()}, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.