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

Question

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

考虑以下几点：

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

如何使其在用户单击span时不会触发div点击事件？

Answer 1

使用事件停止传播().<span&nbsp;onclick="event.stopPropagation();&nbsp;alert('you&nbsp;clicked&nbsp;inside&nbsp;the&nbsp;header');">something&nbsp;inside&nbsp;the&nbsp;header</span>为IE：window.event.cancelBubble = true<span&nbsp;onclick="window.event.cancelBubble&nbsp;=&nbsp;true;&nbsp;alert('you&nbsp;clicked&nbsp;inside&nbsp;the&nbsp;header');">something&nbsp;inside&nbsp;the&nbsp;header</span>

Answer 2

从函数内部获取事件对象有两种方法：第一个参数，在符合W3C标准的浏览器(Chrome、Firefox、Safari、IE9+)中。InternetExplorer中的window.Event对象(<=8)如果您需要支持不遵循W3C建议的遗留浏览器，通常在函数中使用以下内容：function(e)&nbsp;{ &nbsp;&nbsp;var&nbsp;event&nbsp;=&nbsp;e&nbsp;||&nbsp;window.event; &nbsp;&nbsp;[...]; }这将首先检查其中一个，然后检查另一个，然后存储事件变量中找到的任何一个。但是，在内联事件处理程序中没有e对象来使用。在这种情况下，您必须利用arguments集合，它总是可用的，并引用传递给函数的完整参数集：onclick="var&nbsp;event&nbsp;=&nbsp;arguments[0]&nbsp;||&nbsp;window.event;&nbsp;[...]"但是，一般来说，如果需要停止传播之类的复杂操作，就应该避免内联事件处理程序。从中期和长期来看，分别编写事件处理程序并将它们附加到元素是一个更好的主意，无论是可读性还是可维护性。

Answer 3

请记住，Firefox不支持window.Event，因此它必须遵循以下内容：e.cancelBubble&nbsp;=&nbsp;true或者，您可以为Firefox使用W3C标准：e.stopPropagation();如果你想变得漂亮，你可以这样做：function&nbsp;myEventHandler(e) { &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!e) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;window.event; &nbsp;&nbsp;&nbsp;&nbsp;//IE9&nbsp;&&nbsp;Other&nbsp;Browsers &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.stopPropagation)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.stopPropagation(); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//IE8&nbsp;and&nbsp;Lower &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.cancelBubble&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;} }