如何：在另一个 div 中使用 onclick javascript 在另一个 div 中使用 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2385113/
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
Howto: div with onclick inside another div with onclick javascript
提问by Daniel Brink
just a quick question. I'm having a problem with divs with onclick javascript within each other. When I click on the inner div it should only fire it's onclick javascript, but the outer div's javascript is also being fired. How can the user click on the inner div without firing the outer div's javascript?
只是一个简单的问题。我在使用 div 和 onclick javascript 时遇到问题。当我点击内部 div 时，它应该只触发它的 onclick javascript，但外部 div 的 javascript 也被触发。用户如何在不触发外部 div 的 javascript 的情况下单击内部 div？
<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
<div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
回答by Adeel
Basically there are two event models in javascript. Event capturingand Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.
基本上，javascript 中有两种事件模型。事件捕获和事件冒泡。在事件冒泡中，如果您单击内部 div，则首先触发内部 div 单击事件，然后触发外部 div 单击。在事件捕获中，首先触发外部 div 事件，然后触发内部 div 事件。要停止事件传播，请在您的 click 方法中使用此代码。
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
回答by Tim Goodman
Check out the info on event propagation here
在此处查看有关事件传播的信息
In particular you'll want some code like this in your event handlers to stop events from propagating:
特别是，您需要在事件处理程序中使用类似这样的代码来阻止事件传播：
function myClickHandler(e)
{
// Here you'll do whatever you want to happen when they click
// now this part stops the click from propagating
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
回答by user3438083
Just add this code :
只需添加此代码：
window.event.stopPropagation();
回答by Tatu Ulmanen
return false;from the inner div's onclick function:
return false;从内部 div 的 onclick 函数：
<div onclick="alert('inner'); return false;" ...
What you're dealing with is called event propagation.
您正在处理的内容称为事件传播。
回答by rahul
This is a case of event bubbling.
这是一个事件冒泡的例子。
You can use
您可以使用
e.cancelBubble = true; //IE
and
和
e.stopPropagation(); //FF
回答by Juliano Moraes
One more way for webkit based browsers:
基于 webkit 的浏览器的另一种方法：
<div onclick="alert('inner'); event.stopPropagation;" ...
回答by shooby
回答by Ben
回答by freddie
you have two 'div' and three '/div'.
你有两个“div”和三个“/div”。
回答by AngelQuesada
You can use
您可以使用
$("divOrClassThatYouDontWantToPropagate").click(function( event ) {
event.stopPropagation();
});