[英]stopPropagation: element.addEventListener vs onclick attribute
I'm playing with stopPropagation
, adapting code from an MDC doc . 我正在使用
stopPropagation
,从MDC doc调整代码。
Here's the question: Everything works fine if I do what they did and use element.addEVentListener("click", fname)
. 这是一个问题:如果我做了他们所做的事情,并且使用
element.addEVentListener("click", fname)
一切正常。
But, when I try to attach the function with the element's onclick
attribute ( <div onclick="fname();">
), propagation does not stop. 但是,当我尝试使用元素的
onclick
属性( <div onclick="fname();">
)附加函数时,传播不会停止。
And if I use <div onclick="function(ev) {fname();}">
, fname() isn't called at all (I also tried passing fname(ev)
with the same results). 如果我使用
<div onclick="function(ev) {fname();}">
,则根本不会调用fname()(我也尝试使用相同的结果传递fname(ev)
)。
Ideas anyone? 想法有人吗? Let me know if you need to see the code.
如果您需要查看代码,请告诉我。
Actually, your event acts in the following ways: 实际上,您的活动的行为方式如下:
Event Fires, Capturing Phase, Bubbling phase, Event has Default Action applied. 事件触发,捕获阶段,冒泡阶段,事件已应用默认操作。
Thus, in order to stop propagation you can do the following: 因此,为了停止传播,您可以执行以下操作:
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)
}
Please note that propagation can only be stopped during the bubbling phase, and only using event handlers in this way allows you to interrupt an event. 请注意,传播只能在冒泡阶段停止,并且只有使用事件处理程序才能中断事件。
As far as I know the tradidtional method of 据我所知,传统的方法
<div onclick="return fname();">
does not allow this functionality. 不允许此功能。
When you do this: 当你这样做:
<div onclick="fname();">
You're not assigning fname
as the event handler, you're calling fname
from within your event handler (which is an anonymous function created for you). 你并没有使用
fname
作为事件处理程序,你打电话 fname
从事件处理函数(这是为您创建一个匿名函数) 内 。 So your first parameter is whatever you pass into fname
, and in your quoted code, you're not passing anything into it. 因此,您的第一个参数是您传入
fname
任何内容,并且在您引用的代码中,您没有传递任何内容。
You'd want: 你想要:
<div onclick="fname(event);">
But even that won't be reliable, because it assumes that either the auto-generated anonymous function accepts the event
parameter using the name event
or that you're using IE or a browser that does IE-like things and you're looking at IE's global window.event
property. 但即使这样也不可靠,因为它假设自动生成的匿名函数使用name
event
接受event
参数,或者您正在使用IE或浏览器执行类似IE的事情并且您正在查看IE的全局window.event
属性。
The more reliable thing to do is this: 更可靠的事情是:
<div onclick="return fname();">
...and have fname
return false
if it wants to both stop propagation and prevent the browser's default action. ...如果要同时停止传播并阻止浏览器的默认操作,则让
fname
返回false
。
All of this why I strongly advocate always using DOM2 methods ( addEventListener
, which is attachEvent
— with slightly different arguments — on IE prior to IE9) to hook up handlers if you want to do anything interesting in the event (or, 9 times out of 10, even if you don't). 所有这些为什么我强烈主张总是使用DOM2方法(
addEventListener
,这是一个带有稍微不同的参数的attachEvent
- 在IE9之前的IE上)来连接处理程序,如果你想在事件中做任何有趣的事情(或者,9次出10,即使你没有)。
Off-topic : And this whole area is one of the reasons I recommend using a library like jQuery , Prototype , YUI , Closure , or any of several others to smooth over browser differences for you so you can concentrate on your own work. 偏离主题 :整个领域是我推荐使用jQuery , Prototype , YUI , Closure或其他任何一个库来平滑浏览器差异的原因之一,这样你就可以专注于自己的工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.