免疫 / Unclikable 嵌套 div答案

【问题标题】：Immune / Unclikable nested div免疫 / Unclikable 嵌套 div
【发布时间】：2013-01-11 05:45:53
【问题描述】：

我正在创建一个嵌套的 div，如下面的代码

<body>
  <div style='border:solid 1px red' onclick='alert("hi")'>
  Hawaii
    <div style='border:solid 1px blue;margin:10px;' onclick="alert('haha');return false;">Aloha</div>
  </div>
</body>

我想在aloha的div被点击但不冒泡到夏威夷div onclick事件时显示haha，有没有办法实现？

编辑：我忘了提到我知道事件冒泡，但是有没有办法停止单个元素的冒泡/取消传播？

【问题讨论】：

请参阅stackoverflow.com/questions/5971601/javascript-event-bubbling 以及许多其他
对不起，我忘了提到我知道事件冒泡。但是如果我只想禁用这个元素的冒泡，有可能吗？
我认为您需要在调用 alert 后在 onclick 处理程序中调用 stopPropagation（以及 IE 也需要的任何内容）。

标签： javascript html

【解决方案1】：

event.stopPropagation 在现代浏览器中执行此操作。

在版本 9 之前的 Internet Explorer 中，您需要设置 event.cancelBubble = true。

例子：

<div style='border:solid 1px blue;margin:10px;' onclick="alert('haha'); event.stopPropagation(); return false;">Aloha</div>

如果您避免将 Javascript 放在 HTML 属性中，您可以做得更好。

【讨论】：

我知道传播和事件冒泡，是否可以取消一个元素但不是全部？
@cherhan 是的，您在要取消它的元素的事件处理程序中调用它（或为 IE 设置它）。