stopPropagation:element.addEventListener vs onclick属性

Question

我正在玩stopPropagation,调整MDC文档中的代码.

这是一个问题:如果我做了他们所做的事情并且使用了,那么一切正常element.addEVentListener("click", fname).
但是,当我尝试使用元素的onclickattribute(<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浏览器),如果你想要做什么事件感兴趣(或9次了10挂钩处理,即使你不这样做).

偏离主题:整个领域是我推荐使用jQuery,Prototype,YUI,Closure或其他任何一个库来平滑浏览器差异的原因之一,这样你就可以专注于自己的工作.