我需要仅对此项目使用javascript。对不起,没有jQuery(我也感到惭愧)。
我正在为div添加addEventListener
。 “问题”是它也适用于所有孩子。
有没有办法避免这种情况,让监听器只为那个div工作?
提前感谢。
我的代码如下:
document.getElementById(myObj.id).addEventListener("mousedown", myObjDown, false);
function myObjDown() {
//do stuff here
}
答案 0 :(得分:18)
您可以通过阅读回调中的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
不受支持。
答案 1 :(得分:7)
您可以使用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
答案 2 :(得分: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
}