鍍金池/ 問答/數(shù)據(jù)庫  HTML/ js事件委托，某些子元素不觸發(fā)事件改如何處理呢？

js事件委托，某些子元素不觸發(fā)事件改如何處理呢？

js事件委托，某些子元素不觸發(fā)事件改如何處理呢？
如：

<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中時，事件才執(zhí)行。僅僅移動到ul，或者第1個<li><a>11111</a></li>時不執(zhí)行。

我該怎么做呢。

我為ul綁定‘mouseenter’時，它只會在移動到ul范圍執(zhí)行。
綁定‘mousemove’時，我給ul和不需要執(zhí)行事件的li都個notRun的屬性，有這個屬性時它就不執(zhí)行事件。但是li中的所有子元素還是會觸發(fā)事件，難道我還要把li的子元素也加上notRun屬性嗎？

我應(yīng)該怎么做才更合理呢？

回答
編輯回答
好難瘦

事件委托同級元素通過判斷屬性加以阻止，父級元素通過組織冒泡加以阻止。

2018年6月30日 21:43
編輯回答
安于心

你移入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>
2018年3月21日 09:48
編輯回答
念舊

用事件委托的話應(yīng)該是所有的都要執(zhí)行的，只不過你可能需要判斷是第幾個元素，之后做一個特定的處理，其余的都忽略。

2017年6月10日 20:36