stopPropagation：element.addEventListener vs onclick属性 [英] stopPropagation: element.addEventListener vs onclick attribute

问题描述

我在玩 stopPropagation ，修改 MDC doc 。

下面是问题：如果我按照他们所做的操作并使用元素， .addEVentListener（click，fname）。

但是，当我尝试将元素的 onclick 属性（< div onclick =fname（） ;> ），传播不会停止。

如果我使用< div onclick =function（ev）{fname（）; }> ，fname（）根本没有被调用（我也尝试传递 fname（ev） / p>

想法任何人？

解决方案

当您这样做时：

 < div onclick =fname（）;> 
  

您不会将 fname 分配为事件处理程序，你在你的事件处理程序（这是一个为你创建的匿名函数） 内调用 fname 。所以你的第一个参数是你传入 fname 的任何内容，并且在你引用的代码中，你不会传递任何东西。

您需要：

 < div onclick =fname（event）;> 
  

但即使这样也不可靠，因为它假设自动生成的匿名函数接受使用名称事件的事件参数，或者您使用的是IE或浏览器，你正在看IE的全局 window.event 属性。

更可靠的事情是这样的：

 < div onclick =return fname（）;> 
  

...并且有 fname return false 如果它想停止传播并阻止浏览器的默认操作。

所有这些为什么我强烈主张在IE之前使用DOM2方法（ addEventListener ，它是 attachEvent  —具有稍微不同的参数 — IE9）来连接处理程序，如果你想在事件中做任何有趣的事情（或者，10次中有9次，即使你不这样做）。

---

焦点话题：整个区域是我推荐使用类似 jQuery ，原型， YUI ，关闭或>其他任何人来平滑浏览器差异，以便您专注于自己的工作。

I'm playing with stopPropagation, adapting code from an MDC doc.

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 onclick attribute ( <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).

Ideas anyone? Let me know if you need to see the code.

解决方案

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). So your first parameter is whatever you pass into fname, and in your quoted code, you're not passing anything into it.

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.

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.

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).

---

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.

这篇关于stopPropagation：element.addEventListener vs onclick属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！