有一段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Events Examples</title>
<style>
ul {
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
float: left;
}
.highlight {
background-color: red;
}
</style>
</head>
<body>
<ul id="list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<script>
const ul = document.querySelector('#list');
ul.addEventListener('mouseover', highlight);
ul.addEventListener('mouseout', highlight);
function highlight(event) {
console.log(event.target);
event.target.classList.toggle('highlight');
}
</script>
</body>
</html>
启动后是这样的:
我对听众的期望。当我将鼠标移到“ul”的灰色区域时，highlight() 函数应该可以工作。好吧，它工作正常。我不明白的是:当我将鼠标移到“li”元素上时，highlight() 会因未知原因再次工作。如何修复？ 我是 JS 的新手，我还没有找到所描述问题的答案。
最佳答案
如果你说你只想突出显示整个区域，那么使用 "mouseenter" 和 "mouseleave" 代替，this 引用元素。
那么就没有事件冒泡问题需要处理了。
const ul = document.querySelector('#list');
ul.addEventListener('mouseenter', highlight);
ul.addEventListener('mouseleave', highlight);
function highlight(event) {
this.classList.toggle('highlight');
}ul {
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
float: left;
}
.highlight {
background-color: red;
}<ul id="list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>关于javascript - eventListener 和封闭元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47858630/