JS中event.target事件委派遇到多重子节点的元素导致子节点遮挡父节点事件的解决方法

1.问题描述

  事件委派在重复给多个子节点添加相同方法时或者即时添加子节点时很优秀,但如果子节点中还含有自己的子节点,就会发生遮挡。

2.问题分析

event.target会找到使绑定节点执行该事件的触发节点,子节点的子节点也算是绑定事件的子节点之一,所以也可以成为event.target的指向,因而无法指向我们想要操控的节点

3.解决方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: solid 1px;
        }
    </style>
</head>

<body>
    <ul>
        <li>这是第001</li>
        <li>这是第002</li>
        <li>这是第003</li>
        <li>这是第004</li>
        <li>这是第005</li>
        <li>
            <div>
                <div>
                    <p>
                        深层
                    </p>
                </div>
            </div>
        </li>
        <span>21145</span>
    </ul>
    <script>
        //事件委派适用于简单结构或者实时添加的情况
        var ul = document.querySelector("ul")
        ul.addEventListener("mouseover", function (e) {
            //兼容性判断
            e = e || window.e
            var et = e.target || e.srcElement
            console.log(e.target.nodeName);
            //对evt进行复制,然后向上寻找
            var Eve = et
            //使用while判断是否为直接需要操控的元素,如果不是向上寻找
            while (Eve.nodeName !== "LI") {

                //如果寻找到祖先节点,就代表他的所有父节点没有需要操控的节点,不是需要寻找的节点的子节点,退出循环
                // if前置是为了防止触发的第一个如果是祖先元素的话会绕过break导致死循环
                if (Eve.nodeName === e.currentTarget.nodeName) break;
                //父元素寻找完后再向父元素的父元素寻找
                Eve = Eve.parentNode
            }
            //判断抛出的Eve,是否为寻找的指定节点
            if (Eve.nodeName === "LI") Eve.style.backgroundColor = "red"
        }
        )

    </script>
</body>

</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值