5

我正在玩stopPropagation，改编来自MDC 文档的代码。

问题来了：如果我按照他们所做的和使用element.addEVentListener("click", fname).
但是，当我尝试使用元素的onclick属性 ( <div onclick="fname();">) 附加函数时，传播不会停止。
如果我使用<div onclick="function(ev) {fname();}">， fname() 根本不会被调用（我也尝试过传递fname(ev)相同的结果）。

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

4

2 回答 2

9

实际上，您的事件以下列方式运行：

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

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

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();">

不允许此功能。

于 2011-04-18T14:56:38.813 回答
8

当你这样做时：

<div onclick="fname();">

您没有指定fname为事件处理程序，而是从事件处理程序（这是为您创建的匿名函数）中调用。 所以你的第一个参数是你传入的任何东西，在你引用的代码中，你没有传入任何东西。fnamefname

你会想要：

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

但即使这样也不可靠，因为它假设自动生成的匿名函数event使用名称接受参数，event或者您使用的是 IE 或执行类似 IE 的操作的浏览器，并且您正在查看 IE 的全局window.event财产。

更可靠的做法是：

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

...如果它想停止传播并阻止浏览器的默认操作，则fname返回。false

这就是为什么我强烈主张始终使用 DOM2 方法（在 IE9 之前的 IEaddEventListener上使用 DOM2 方法（attachEvent 参数略有不同）来连接处理程序，如果你想在事件中做任何有趣的事情（或者，10 次中有 9 次，即使你不这样做）。

题外话：这整个领域是我推荐使用像jQuery、Prototype、YUI、Closure或任何其他库来为您消除浏览器差异的原因之一，这样您就可以专注于自己的工作。

于 2011-04-18T14:38:33.327 回答