如何：使用 onclick javascript 在另一个 div 中使用 onclick 的 div答案

【问题标题】：Howto: div with onclick inside another div with onclick javascript如何：使用 onclick javascript 在另一个 div 中使用 onclick 的 div
【发布时间】：2010-03-05 07:14:03
【问题描述】：

只是一个简单的问题。我在使用 onclick javascript 的 div 中遇到问题。当我点击内部 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>

【问题讨论】：

重复。 stackoverflow.com/questions/2015041/…
重复的问题，但更好的答案。

标签： javascript html onclick

【解决方案1】：

javascript 中基本上有两种事件模型。 事件捕获和事件冒泡。在事件冒泡中，如果单击内部 div，则首先触发内部 div 单击事件，然后触发外部 div 单击事件。在事件捕获中，首先触发外部 div 事件，然后触发内部 div 事件。要停止事件传播，请在您的 click 方法中使用此代码。

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

【讨论】：

谢谢。优秀的答案；正是我想要的。

【解决方案2】：

查看事件传播信息here

特别是，您需要在事件处理程序中使用类似这样的代码来阻止事件传播：

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();
}

【讨论】：

【解决方案3】：

只需添加此代码：

window.event.stopPropagation();

【讨论】：

这对我不起作用。最佳答案更准确。

【解决方案4】：

return false; 来自内部 div 的 onclick 函数：

<div onclick="alert('inner'); return false;" ...

你正在处理的是event propagation。

【讨论】：

您建议的方法实际上不起作用。（至少在我刚刚仔细检查过的任何浏览器中都没有——Firefox 3.6、IE8。）请注意，您的链接实际上说要使用不同的方法，我在回答中给出了这种方法。

【解决方案5】：

这是一个事件冒泡的例子。

你可以使用

e.cancelBubble = true; //IE

和

e.stopPropagation(); //FF

【讨论】：

【解决方案6】：

基于 webkit 的浏览器的另一种方式：

<div onclick="alert('inner'); event.stopPropagation;" ...

【讨论】：

这可行，但像这样：onclick="alert('inner'); event.stopPropagation();"
这对我有用，我在 Opera (46)、Chrome (59.0.3071.115)、FireFox Developer (55.0b9 (32-bit))、Internet Explorer 11 上进行了测试

【解决方案7】：

Here 是更多参考资料，可帮助您了解 javascript 事件冒泡。

【讨论】：

【解决方案8】：

你有两个“div”和三个“/div”。

【讨论】：

【解决方案9】：

这很有帮助，但对我没有用。

我所做的被描述为here。

所以我给外部onclick事件加了一个条件：

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}

【讨论】：

【解决方案10】：

你可以使用

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

【讨论】：

【解决方案11】：

这在 Jquery 中对我有用：

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

这样，如果当前目标和外层div不一样，就什么都不做。您可以在子元素上实现正常功能。

【讨论】：