在Chrome和Firefox中停止onmouseenter重复触发
的方法是使用事件委托和事件标志。
事件委托是指将事件绑定到父元素上，然后通过事件冒泡机制来处理子元素的事件。这样可以避免给每个子元素都绑定事件，提高性能。
事件标志是指在事件处理函数中设置一个标志，用于判断是否已经执行过该事件处理函数。当事件触发时，先检查标志，如果已经执行过，则直接返回，不再重复触发。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Stop onmouseenter from firing repeatedly in Chrome and Firefox</title>
<style>
.parent {
width: 200px;
height: 200px;
background-color: lightblue;
}
.child {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');
var isMouseEntered = false;
parent.addEventListener('mouseenter', function() {
if (isMouseEntered) {
return;
}
console.log('Mouse entered parent');
isMouseEntered = true;
});
parent.addEventListener('mouseleave', function() {
console.log('Mouse left parent');
isMouseEntered = false;
});
child.addEventListener('mouseenter', function() {
console.log('Mouse entered child');
});
child.addEventListener('mouseleave', function() {
console.log('Mouse left child');
});
</script>
</body>
</html>在上面的代码中，我们使用了一个布尔型变量isMouseEntered来标志鼠标是否已经进入了父元素。在父元素的mouseenter事件处理函数中，我们首先检查isMouseEntered的值，如果为true，则直接返回，不再重复触发。在父元素的mouseleave事件处理函数中，我们将isMouseEntered的值设为false，表示鼠标已经离开了父元素。
这样，在Chrome和Firefox中，当鼠标进入父元素时，只会触发一次mouseenter事件，而不会重复触发。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
