事件冒泡和事件捕获的应用场景——事件代理/事件委托

采用事件代理,为页面中的所有a标签绑定click事件。 document.addEventListener("click", function(e) {if (e.target.nodeName == "A")console.log("a");}, false); 问题:若a标签里面仍有s...

采用事件代理,为页面中的所有a标签绑定click事件。


document.addEventListener("click", function(e) {
if (e.target.nodeName == "A")
console.log("a");
}, false);
问题:若a标签里面仍有span、img等其他元素,上述代码中,单击span、img等其他元素不能触发click事件。


原因:单击span、img等其他元素时,e.target指向的是触发click事件的元素(span、img等其他元素),而不是a标签。


解决方法:从触发click事件的元素开始,逐级向上查找,直到找到a标签为止。

document.addEventListener("click", function(e) {
var node = e.target;
while (node.parentNode.nodeName != "BODY") {
if (node.nodeName == "A") {
console.log("a");
break;
}
node = node.parentNode;
}
}, false);

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
廖雪
廖雪

78 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章