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

看，风来了

已于 2022-11-23 08:43:09 修改

阅读量623

点赞数

文章标签： json javascript html5

于 2022-08-19 14:34:05 首次发布

本文链接：https://blog.csdn.net/fllfllfll/article/details/126423372

版权

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>