js事件委托，某些子元素不触发事件改如何处理呢？
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属性吗？
我应该怎么做才更合理呢？
繁星淼淼浏览 384回答 1
1回答
-
九州编程
你移入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><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>
随时随地看视频慕课网APP
相关分类
JavaScript