js事件委托，某些子元素不触发事件改如何处理呢？

发布于 2022-09-06 06:25:56 字数 720 浏览 10 评论 0

js事件委托，某些子元素不触发事件改如何处理呢？
如：

<ul>
    <li>
        <a>11111</a>
    </li>
    <li>
        <a>11111</a>
    </li>
    <li>
        <a>11111</a>
    </li>
    <li>
        <a>11111</a>
    </li>
    <li>
        <a>11111</a>
    </li>
</ul>

我想当鼠标移动到后面5个li中时，事件才执行。仅仅移动到ul，或者第1个<li><a>11111</a></li>时不执行。

我该怎么做呢。

我为ul绑定‘mouseenter’时，它只会在移动到ul范围执行。
绑定‘mousemove’时，我给ul和不需要执行事件的li都个notRun的属性，有这个属性时它就不执行事件。但是li中的所有子元素还是会触发事件，难道我还要把li的子元素也加上notRun属性吗？

我应该怎么做才更合理呢？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情深缘浅 2022-09-13 06:25:56

你移入li时e.target是li，在文字上是e.target是a了，给a一个穿透的css，这样移入的全是li了，
或者你判断e.target是a的话，则是e.target.parentNode的getAttribute("notRun")，否者就是e.target的getAttribute("notRun")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li a{
            pointer-events: none;
        }
    </style>
</head>
<body>
    <ul>
        <li notRun="true">
            <a>11111</a>
        </li>
        <li>
            <a>11111</a>
        </li>
        <li>
            <a>11111</a>
        </li>
        <li>
            <a>11111</a>
        </li>
        <li>
            <a>11111</a>
        </li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('mouseover',function(e){
            if((!e.target.getAttribute("notRun"))&&e.target.tagName==="LI"){
                console.log(111);
            };
        })
    </script>
</body>
</html>

回复收藏 0