18

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

我正在向addEventListenerdiv 添加一个。“问题”是它也适用于它的所有孩子。

有没有办法避免这种情况，让监听器只为那个 div 工作？

提前致谢。

我的代码如下所示：

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

function myObjDown() {
  //do stuff here
}
4

3 回答 3

30

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，则没有任何内容，因为addEventListener它们不支持。

于 2012-12-17T16:58:19.830 回答
14

您可以使用 currentTarget 事件属性

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

  // Do your stuff.
}, false);

更多细节：https ://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

于 2015-05-29T08:27:25.300 回答
2

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

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

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

function myObjDown(e) {
  console.log("event: %o - target: %o", e, e.target);

  var elm = e.target;
  //do stuff here
}

有人建议..

此方法可能会导致某些浏览器版本的内存泄漏。如果有人遇到过这种情况或有任何有价值的见解。请评论。

在这方面，另一种选择是

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
}
于 2015-01-11T00:23:16.257 回答