javascript addEventListener不选择子项

我只需要为这个项目使用javascript。对不起，没有jQuery（我也感到惭愧）

我正在向div添加一个

addEventListener

。“问题”是它也适用于它的所有子级

有没有办法避免这种情况，让侦听器只为该div工作

提前感谢

---

我的代码如下所示：

document.getElementById(myObj.id).addEventListener("mousedown", myObjDown, false);

function myObjDown() {
  //do stuff here
}

---

通过读取回调中的

event.target

，可以判断事件实际触发的元素

var el = ...
el.addEventListener('click', function(event){
  if (el !== event.target) return;

  // Do your stuff.

}, false);

另一个选项是将处理程序绑定到子元素，以防止事件到达父处理程序，但这需要更多的工作，并且可能会对实际在父处理程序之上侦听的事件隐藏事件

更新 给出您的示例代码，您应该能够做到这一点

var el = document.getElementById(myObj.id);
el.addEventListener("mousedown", myObjDown, false);

function myObjDown(event) {
  if (el !== event.target) return;

  //do stuff here
}

---

另外，作为一般注意事项，请记住，如果这在IE<9上起作用，则不会发生任何问题，因为这些IE<9上不支持

addEventListener

。

这里有一个替代方案，它使myObjDown函数与典型的事件处理程序保持一致。（使用e.target作为事件调用元素的引用）

var CssSelector=“div.className”；
var elms=document.queryselectoral（CssSelector）；
对于（i=0；i

---

有人建议。。 此方法可能导致某些浏览器版本的内存泄漏。如果有人遇到此问题或有任何有价值的见解，请发表评论

---

在这方面，另一种选择是

var CssSelector=“div.className”；
var elms=document.queryselectoral（CssSelector）；
对于（i=0；i

您可以使用currentTarget事件属性

el.addEventListener('click', function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }

  // Do your stuff.
}, false);

---

更多详细信息：

它实际上并没有将事件添加到子事件中（我猜，因为您没有向我们显示代码）。发生的是事件正在冒泡。您希望在捕获阶段绑定事件并取消冒泡。

element1.addEventListener（'click'，doSomething，true）；

和

event.cancelBubble=true；

请查看我的编辑，以便了解我是如何构建它的。我知道IE的事情，只是我需要根据客户端请求使用非常简单的javascript。-booring@johnsmith没那么糟。我整天都在做标准JS:D

var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, elms[i].id}, false);
}

function myObjDown(id) {
  console.log("element: %o ", document.getElementById(id));

  //do stuff here
}

el.addEventListener('click', function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }

  // Do your stuff.
}, false);