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

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

心靈之曲

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

原创

862人浏览过

解决 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 事件可能会触发两次。

解决方案

最优化方法的Matlab实现中文WORD版

用最优化方法解决最优化问题的技术称为最优化技术，它包含两个方面的内容： 1）建立数学模型即用数学语言来描述最优化问题。模型中的数学关系式反映了最优化问题所要达到的目标和各种约束条件。 2）数学求解数学模型建好以后，选择合理的最优化方法进行求解。利用Matlab的优化工具箱，可以求解线性规划、非线性规划和多目标规划问题。具体而言，包括线性、非线性最小化，最大最小化，二次规划，半无限问题，线性、非线性方程（组）的求解，线性、非线性的最小二乘问题。另外，该工具箱还提供了线性、非线性最小化，方程求解，

查看详情

为了避免这个问题，可以使用 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中文网其它相关文章！