javascript stopPropagation: element.addEventListener vs onclick 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5704479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
stopPropagation: element.addEventListener vs onclick attribute
提问by Nathan
I'm playing with stopPropagation, adapting code from an MDC doc.
我正在玩stopPropagation，改编来自MDC 文档的代码。
Here's the question: Everything works fine if I do what they did and use element.addEVentListener("click", fname).
But, when I try to attach the function with the element's onclickattribute ( <div onclick="fname();">), propagation does not stop.
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).
问题是：如果我按照他们所做的去做并使用element.addEVentListener("click", fname).
但是，当我尝试使用元素的onclick属性 ( <div onclick="fname();">)附加函数时，传播不会停止。
如果我使用<div onclick="function(ev) {fname();}">，则根本不会调用 fname() （我也尝试fname(ev)以相同的结果传递）。
Ideas anyone? Let me know if you need to see the code.
任何人的想法？如果您需要查看代码，请告诉我。
回答by GAgnew
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.
不允许使用此功能。
回答by T.J. Crowder
When you do this:
当你这样做时：
<div onclick="fname();">
You're not assigning fnameas the event handler, you're callingfnamefrom withinyour event handler (which is an anonymous function created for you). So your first parameter is whatever you pass into fname, and in your quoted code, you're not passing anything into it.
您不是分配fname为事件处理程序，而是从事件处理程序（这是为您创建的匿名函数）内部调用。所以你的第一个参数是你传入的任何东西，在你引用的代码中，你没有传入任何东西。fnamefname
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 eventparameter using the name eventor that you're using IE or a browser that does IE-like things and you're looking at IE's global window.eventproperty.
但即使这样也不可靠，因为它假设自动生成的匿名函数接受event使用名称的参数，event或者您使用的是 IE 或执行类似 IE 功能的浏览器，并且您正在查看 IE 的全局window.event财产。
The more reliable thing to do is this:
更可靠的做法是：
<div onclick="return fname();">
...and have fnamereturn falseif 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 方法（ 在 IE9 之前的 IE 上addEventListener，它的attachEvent参数略有不同）来连接处理程序，如果您想在事件中做任何有趣的事情（或者，10 次中有 9 次，即使你不这样做）。
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 othersto smooth over browser differences for you so you can concentrate on your own work.
题外话：这整个领域是我推荐使用像jQuery、Prototype、YUI、Closure或其他几个库这样的库的原因之一，为您平滑浏览器差异，以便您可以专注于自己的工作。
