javascript addEventListener 不选择孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13918441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript addEventListener without selecting children
提问by john smith
I needto use javascript only for this project. Sorry, no jQuery (I feel ashamed as well).
我只需要在这个项目中使用 javascript。抱歉，没有 jQuery（我也觉得很惭愧）。
I am adding an addEventListenerto a div. "Problem" is that it applies to all its children, too.
我正在向addEventListenerdiv添加一个。“问题”是它也适用于它的所有孩子。
Is there a way to avoid this, and have the listener work only for that div?
有没有办法避免这种情况，让听众只为那个 div 工作？
Thankd in advance.
提前致谢。
my code looks like this:
我的代码是这样的：
document.getElementById(myObj.id).addEventListener("mousedown", myObjDown, false);
function myObjDown() {
//do stuff here
}
回答by loganfsmyth
You can tell which element the event actually fired on by reading event.targetin your callback.
您可以通过读取event.target回调来判断事件实际上是在哪个元素上触发的。
var el = ...
el.addEventListener('click', function(event){
if (el !== event.target) return;
// Do your stuff.
}, false);
The other option would be to have handlers bound to the child elements to prevent the event from reaching the parent handler, but that is more work and potentially hides events from things that might actually be listening for them above the parent.
另一种选择是将处理程序绑定到子元素，以防止事件到达父处理程序，但这是更多的工作，并且可能隐藏事件，使其免受父级之上实际上可能正在侦听它们的事物的影响。
Update
更新
Given your example code, you should be able to do this.
鉴于您的示例代码，您应该能够做到这一点。
var el = document.getElementById(myObj.id);
el.addEventListener("mousedown", myObjDown, false);
function myObjDown(event) {
if (el !== event.target) return;
//do stuff here
}
Also as a general note, keep in mind that none if this will work on IE < 9 because addEventListeneris not supported on those.
同样作为一般说明，请记住，如果这对 IE < 9 有效，addEventListener则没有，因为不支持这些。
回答by Mario Trucco
You can use the currentTarget Event Property
您可以使用 currentTarget 事件属性
el.addEventListener('click', function(event) {
if (event.currentTarget !== event.target) {
return;
}
// Do your stuff.
}, false);
More details: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
更多详情：https: //developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
回答by Brett Caswell
Here's an alternative, which keeps your myObjDown function in line with a typical event handler. (using e.target as reference to the event invoking element)
这是一种替代方法，它使您的 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
}
It was suggested that ..
有人建议..
this method could cause memory leaks with versions of some browsers. If anyone experiences this or has any valuable insights. Please comment.
这种方法可能会导致某些浏览器版本的内存泄漏。如果有人经历过这个或有任何有价值的见解。请评论。
an alternative, in this regard would be
在这方面的另一种选择是
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
}
