Question

我正在玩stopPropagation，正在调整MDC doc的代码。

以下是问题：如果我做了他们所做的事情并使用element.addEVentListener("click", fname)，一切正常。
但是，当我尝试使用元素的onclick属性（<div onclick="fname();">）附加函数时，传播不会停止。
如果我使用<div onclick="function(ev) {fname();}">，则根本不会调用fname（）（我也尝试传递fname(ev)并获得相同的结果）。

任何人的想法？如果您需要查看代码，请告诉我。

Answer 1

实际上，您的活动的行为方式如下：

事件触发，捕获阶段，冒泡阶段，事件已应用默认操作。

因此，为了停止传播，您可以执行以下操作：

element1.addEventListener('click',fname,true)  // Capturing phase
element1.addEventListener('click',fname,false) // Bubbling phase

fname(event){
  event.stopPropagation();
//event.preventDefault(); is also available here (in both phases I believe)
}

请注意，传播只能在冒泡阶段停止，只有使用事件处理程序才能中断事件。

据我所知，

的传统方法

<div onclick="return fname();">

不允许此功能。

Answer 2

执行此操作时：

<div onclick="fname();">

您没有将fname指定为事件处理程序，而是从事件处理程序中的调用 fname（这是一个为您创建的匿名函数）。因此，您的第一个参数是传入fname的任何内容，并且在引用的代码中，您没有传递任何内容。

你想要：

<div onclick="fname(event);">

但即使这样也不可靠，因为它假定自动生成的匿名函数使用名称event接受event参数，或者您正在使用IE或浏览器做类似IE的事情，你正在看IE的全球window.event属性。

更可靠的做法是：

<div onclick="return fname();">

...如果要同时停止传播并阻止浏览器的默认操作，请fname返回false。

所有这一切为什么我强烈主张总是使用DOM2方法（addEventListener，即attachEvent - 在IE9之前的IE上稍微不同的参数）来连接处理程序，如果你想做任何事情有趣的事件（或者，10次中有9次，即使你没有）。

偏离主题：整个区域是我推荐使用jQuery，Prototype，YUI，{{3}等库的原因之一}}，或Closure为您平滑浏览器差异，以便您可以专注于自己的工作。

stopPropagation：element.addEventListener vs onclick属性

2 个答案: