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属性吗？我应该怎么做才更合理呢？
1 回答
九州编程
TA贡献1785条经验 获得超4个赞
你移入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>
添加回答
举报
0/150
提交
取消