stopPropagation: element.addEventListener vs onclick attribu

Question

我在玩stopPropagation，从MDC文档中改编代码。

问题是：如果我像他们一样使用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();">

并且如果CCD_ 13想要停止传播并且阻止浏览器的默认动作，则使其返回CCD_。

所有这些都是我强烈主张始终使用DOM2方法(addEventListener，即attachEvent—在IE9之前的IE上具有略微不同的参数—(来连接处理程序的原因，如果您想在事件中做任何有趣的事情(或者，10次中有9次，即使您不想做(。

---

离题：这就是我建议使用jQuery、Prototype、YUI、Closure或其他任何库来消除浏览器差异的原因之一，这样你就可以专注于自己的工作。