javascript - 目标元素存在子元素时，如何用原生JS实现事件委托 ？

问题描述

问 题

在一个ul下有多个li，li里面有一个a标签。用事件委托将li的click事件绑定在ul上，如何判断是否点了li这个元素？我点了li会触发，但是点蓝色的a标签却不会触发，如何实现点了a标签页触发这个事件？

<ul id = "p">
    <li><a>这是a的元素</a>li中的元素</li>
    <li>第二个</li>
</ul>
var p = document.getElementById("p");
    p.onclick = function (event) {
       if(event.target.nodeName == 'LI'){
            alert("li");
       }
    };

解决方案

并不是不触发整个事件，而是触发了，只不过event.target不是a标签的父元素<li><a>这是a的元素</a>li中的元素</li>,而是a标签本身<a>这是a的元素</a>。自然，event.target.nodeName不等于LI了

     function getNode(node) {
        if (node.nodeName === 'LI') {
            return node;
        } else {
            return getNode(node.parentNode);
        }
    }

    

getNode(eventTarget)就永远返回目标节点最紧临的那个父辈或着祖先 LI元素了。

这篇关于javascript - 目标元素存在子元素时，如何用原生JS实现事件委托 ？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！