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

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

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

问题分析

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

示例代码

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

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

解决方案

行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

下载

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

修改后的示例代码

  
demo2: border-color

#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');
});

  
demo1: border-style


  
demo2: border-color

#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 事件被重复触发。这个小技巧可以有效地提高代码的稳定性和可靠性。