目标元素存在子元素时,如何用原生JS实现事件委托 ?
代言
代言 2017-02-24 14:49:54
[HTML讨论组]

在一个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)
大家讲道理

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


热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号