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

发布于
2017-12-02

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属性吗？

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

javascript 事件委托

阅读 5.7k

3 个回答

陌路凡歌

✓ 已被采纳

你移入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>