如何使用内联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 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>

Answer 2

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

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

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

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

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

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

但是，一般来说，如果需要停止传播之类的复杂操作，就应该避免内联事件处理程序。从中期和长期来看，分别编写事件处理程序并将它们附加到元素是一个更好的主意，无论是可读性还是可维护性。

Answer 3

请记住，Firefox不支持window.Event，因此它必须遵循以下内容：

e.cancelBubble = true

或者，您可以为Firefox使用W3C标准：

e.stopPropagation();

如果你想变得漂亮，你可以这样做：

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}