解决 Mouseenter 事件触发两次的问题-js教程-PHP中文网

解决 Mouseenter 事件触发两次的问题

心靈之曲

发布： 2025-09-16 19:28:01

原创

857人浏览过

解决 mouseenter 事件触发两次的问题

本文针对 mouseenter 事件在特定情况下触发两次的问题进行分析和解决。通过示例代码演示了问题发生的场景，并详细解释了使用 borderStyle = 'none' 导致事件重复触发的原因。最终，提供了使用 borderColor = 'transparent' 的解决方案，避免了高度变化，从而保证 mouseenter 事件只触发一次。

在使用 mouseenter 事件监听鼠标进入元素时的行为时，有时会遇到一个奇怪的现象：当鼠标从元素的边缘（特别是底部边缘）缓慢进入，并且元素内部存在嵌套子元素时，mouseenter 事件可能会触发两次。这会导致一些非预期的行为。

问题分析

问题的根源在于当使用 borderStyle = 'none' 来移除边框时，元素的高度会发生细微的变化。当鼠标从父元素的底部边缘进入子元素时，由于高度的变化，鼠标可能会在极短的时间内离开父元素，然后再次进入。这导致 mouseenter 事件被触发两次。

示例代码

以下代码展示了问题发生的场景：

<div id="demo">
    <div id="test"></div>
</div>

登录后复制

#demo {
  border: 1px solid gray;
  height: 60px;
  padding: 18px;
}

#test {
  background-color: blue;
  height: 100%;
  width: 100%;
}

登录后复制

const main = document.querySelector('#demo');

main.addEventListener ( 'mouseenter', function (e) {
    this.style.borderStyle = 'none';

    console.log ( 'enter' );
});

登录后复制

在这个例子中，当鼠标从 #demo 元素的底部进入 #test 元素时，mouseenter 事件可能会触发两次。

解决方案

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

为了避免这个问题，可以使用 borderColor = 'transparent' 来隐藏边框，而不是使用 borderStyle = 'none'。borderColor = 'transparent' 不会改变元素的高度，因此可以避免 mouseenter 事件被重复触发。

修改后的示例代码

<div id="demo2">
  <div id="test2">demo2: border-color</div>
</div>

登录后复制

#demo2 {
  width: 50%;
  margin: 50px auto;
  background: navy;
  border: 5px solid gray;
  padding: 18px;
}

登录后复制

const main2 = document.querySelector('#demo2');
main2.addEventListener('mouseenter', function(e) {
  this.style.borderColor = 'transparent';
  console.log('enter');
});

登录后复制

代码对比

以下代码展示了两种方法的对比：

const main1 = document.querySelector('#demo1');
main1.addEventListener('mouseenter', function(e) {
  this.style.borderStyle = 'none';
  console.log('enter');
});

const main2 = document.querySelector('#demo2');
main2.addEventListener('mouseenter', function(e) {
  this.style.borderColor = 'transparent';
  console.log('enter');
});

登录后复制

<div id="demo1">
  <div id="test1">demo1: border-style</div>
</div>
<div id="demo2">
  <div id="test2">demo2: border-color</div>
</div>

登录后复制

#demo1,
#demo2 {
  width: 50%;
  margin: 50px auto;
  background: navy;
  border: 5px solid gray;
  padding: 18px;
}

#demo1 {
  margin-bottom: 100px;
}

登录后复制

总结

当需要在 mouseenter 事件中隐藏边框时，应该使用 borderColor = 'transparent' 而不是 borderStyle = 'none'，以避免元素高度变化导致的 mouseenter 事件被重复触发。这个小技巧可以有效地提高代码的稳定性和可靠性。

以上就是解决 Mouseenter 事件触发两次的问题的详细内容，更多请关注php中文网其它相关文章！