Javascript：单击正文中除其中一个元素之外的任意位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33657212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Click anywhere in body except the one element inside it
提问by Prateek Lal
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 .exceptinside body, I don't want it to hide but when I click on bodyit should hide.
当我点击.except里面的一个特定元素时body，我不希望它隐藏，但是当我点击body它时应该隐藏。
HTML
HTML
<html>
<head>
<title>Click anywhere except that specific element</title>
</head>
<body id="wrapper">
<center>
<div id="except"></div>
</center>
</body>
</html>
JS
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!
任何帮助表示赞赏。请原谅我的格式不正确（这是我在这里的第一篇文章）。谢谢！
回答by Marc
You need to stopPropagationto the outer element.
你需要到stopPropagation外部元素。
Here's a simple illustration: http://jsfiddle.net/5mhqrhwk/3/
这是一个简单的说明：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:
HTML：
<div id="wrapper">
<center>
<div id="except"></div>
</center>
</div>
回答by metal03326
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):
你真的不需要任何标志来做到这一点。只需聆听身体点击并根据点击的项目（event.target）做不同的事情。此代码应该完全符合您的要求（基于您的代码）：
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";
}
回答by Daniel Moses
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 对象冒泡
except.addEventListener("click", function(event){event.stopPropagation()}, false);
