javascript addEventListener没有选择孩子

Question

我只需要为这个项目使用javascript.对不起,没有jQuery(我也感到惭愧).

我正在添加addEventListener一个div."问题"是它也适用于所有孩子.

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

提前感谢.

---

我的代码看起来像这样:

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

function myObjDown() {
  //do stuff here
}

Answer 1

您可以通过读取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则不会,因为这些不受支持.

Answer 2

您可以使用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