Javascript 如何阻止 div 中的 onclick 事件传播到文档？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3076642/
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
How to stop onclick event in div from propagating to the document?
提问by dougkramer
I want to stop propagation of this div's onclick event to the document? When the user click on the "div", both alerts appear: 1) the div's alert and 2) the document's alert. I want to suppress the document alert.
我想停止将此 div 的 onclick 事件传播到文档？当用户单击“div”时，会出现两个警报：1) div 的警报和 2) 文档的警报。我想抑制文档警报。
I know how to do it using addEventListener, but is there another way to to do it? The problem below is that I don't know how to get ahold of the event -- I tried "event = element.onclick", shown below, but that doesn't work. How do I get the event?
我知道如何使用 addEventListener 来做到这一点，但还有其他方法可以做到吗？下面的问题是我不知道如何获得事件——我尝试了“event = element.onclick”，如下所示，但这不起作用。我如何获得活动？
<head>
<script>
function showMenu(element) {
alert("div clicked");
event = element.onclick; // HOW TO GET HOLD OF THE EVENT?
// Don't propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
}
document.onclick = function() {
alert('document clicked');
};
</script>
</head>
<body>
<div id="foodmenu" onclick="showMenu(this);">Click inside this div</div>
or click outside the div.
</body>
回答by Hooray Im Helping
Change your function definition to include the event:
更改您的函数定义以包含事件：
function showMenu(event, element) {
alert("div clicked");
// Don't propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
}
Then change the call to pass in the event:
然后将调用更改为传入事件：
div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>
回答by tcooc
Try EventListeners:
尝试事件监听器：
html:
html：
<div id="fooddmenu">Click inside this div</div>or click outside the div.??????????
js:
js：
function showMenu(e) {
alert("div clicked");
}
document.onclick = function() {
alert('document clicked');
};
window.onload = function(){
document.getElementById("fooddmenu").addEventListener("click", function(e){
showMenu(this);
e.stopPropagation();
});
};
回答by Ashit Vora
$("div").click(function(){
...
...
...
return false; //this will stop the further propagation of the event
});
回答by Ashit Vora
Douglas, It does stop the event from getting bubbled up.
道格拉斯，它确实阻止了事件的发酵。
Check this out http://jsbin.com/ahoyi/edit
看看这个http://jsbin.com/ahoyi/edit
here, if you comment the alert statement, it will show 2 alerts on clicking the smaller box else only one.
在这里，如果您评论警报语句，它会在单击较小的框时显示 2 个警报，否则仅显示 2 个警报。
Hope this helps.
希望这可以帮助。
回答by Ashit Vora
well, that's a jquery code. $("#id") same as document.getElementById("id")
嗯，这是一个 jquery 代码。$("#id") 与 document.getElementById("id") 相同
.click function is same as addEvent("click", function() { ... } );
.click 函数等同于 addEvent("click", function() { ... } );
so basically both the functions there are click handlers for Parent and Child DIVs.
所以基本上这两个函数都有用于父和子 DIV 的单击处理程序。
Observe the output by commenting / uncommenting the "return false;" statement.
通过注释/取消注释“return false”来观察输出；陈述。
Hope that helps.
希望有帮助。
By the way, sorry for that "$" confusion.
顺便说一下，对于“$”混淆感到抱歉。
回答by Aaron Harun
Add the onclick to the body element.
将 onclick 添加到 body 元素。
