为了账号安全,请及时绑定邮箱和手机立即绑定

目标元素存在子元素时,如何用原生JS实现事件委托 ?

目标元素存在子元素时,如何用原生JS实现事件委托 ?

小怪兽爱吃肉 2018-10-18 13:11:45
在一个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");       }    };
查看完整描述

1 回答

?
繁华开满天机

TA贡献1816条经验 获得超4个赞

并不是不触发整个事件,而是触发了,只不过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元素了。


查看完整回答
反对 回复 2018-11-20
  • 1 回答
  • 0 关注
  • 1014 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信