如何使用内联 onclick 属性停止事件传播？

Question

考虑以下：

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

我怎样才能做到这一点，当用户点击跨度时，它不会触发 div 的点击事件？

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 event.stopPropagation() 。

 <span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

对于 IE： window.event.cancelBubble = true

 <span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

原文由 James 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有两种方法可以从函数内部获取事件对象：

1. 第一个参数，在符合 W3C 标准的浏览器中（Chrome、Firefox、Safari、IE9+）
2. Internet Explorer 中的 window.event 对象 (<=8)

如果您需要支持不遵循 W3C 建议的旧版浏览器，通常在一个函数中您可以使用如下内容：

 function(e) {
  var event = e || window.event;
  [...];
}

这将检查第一个，然后检查另一个并存储在事件变量中找到的任何一个。但是，在内联事件处理程序中没有要使用的 e 对象。在这种情况下，您必须利用 arguments 集合，该集合始终可用并引用传递给函数的完整参数集：

 onclick="var event = arguments[0] || window.event; [...]"

但是，一般来说，如果您需要像停止传播这样复杂的事情，您应该避免使用内联事件处理程序。从中期和长期来看，单独编写事件处理程序并将它们附加到元素是一个更好的主意，无论是为了可读性和可维护性。

原文由 Gareth 发布，翻译遵循 CC BY-SA 3.0 许可协议