没有选择 child 的javascript addEventListener

Question

我需要只为这个项目使用javascript。抱歉，没有 jQuery(我也觉得很惭愧)。

我正在向一个 div 添加一个 addEventListener。 “问题”是它也适用于它的所有 child 。

有没有办法避免这种情况，让监听器只为那个 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);

另一种选择是将处理程序绑定(bind)到子元素以防止事件到达父处理程序，但这样做需要更多工作，并且可能会隐藏事件，而这些事件实际上可能会在父级之上监听它们。

更新

鉴于您的示例代码，您应该能够做到这一点。

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。