onmouseover和onmouseout事件冒泡导致闪烁的问题

关注

原创最新推荐文章于 2026-10-19 13:07:25 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

VMD分子可视化实战：5个隐藏技巧让你的科研图像秒变顶刊级别本文深入探讨了VMD分子可视化软件在科研图像美化中的5个高阶技巧，旨在帮助研究者将分子结构图提升至顶刊级别。内容涵盖原子色彩与材质的艺术化定制、沉浸式分子环境构建、专业构图与视角控制、数据驱动的动态可视化以及自动化工作流建立，通过精细的色彩映射、光照调整、周期性边界展示和脚本自动化，显著增强图像的科学叙事性与视觉冲击力。阅读详情

在一个元素上同时绑定onmouseover和onmouseout事件时，如果这个元素包含有子元素，那么当鼠标在元素内部移动时，会因为事件冒泡而发生以下情况：在元素内部从区域1移动到子元素区域2，依然会触发onmouseout和onmouseover事件。我是在做一个table表格时，利用onmouseout和onmouseover来动态绘不同的制折线图，所以这种情况会导致table和折线图一直闪烁，解决办法如下：

<div id="div1">
	<div id="div2"></div>
</div>

1.利用relatedTarget属性和contains，判断鼠标是否在元素内部移动，如果是则返回。
在mouseout事件中， target是移出的元素，relatedTarget是对应移入的元素。
在mouseover事件中， target是移入的元素，relatedTarget是移入之前的元素。
在mouseover事件中判断鼠标是否在元素内部移动:

var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(e) {
      var e = e || window.event;
      //e.fromELement兼容IE
      var eFrom = e.fromElement || e.relatedTarget;
      if (oDiv.contains(eFrom)) {
          return;
       }
};

在mouseout事件中判断鼠标是否在元素内部移动：

oDiv.onmouseover = function(e) {
      var e = e || window.event;
      //e.fromELement兼容IE
      var eTo = e.toElement || e.relatedTarget;
      if (oDiv.contains(eTo)) {
          return;
       }
};

2.如果在不需要使用事件冒泡的情况下，还可以将onmouseover和onmouseout替换成onmouseenter和onmouseleave来解决这个问题。onmouseenter和onmouseleave不支持事件冒泡，除此之外其他功能和onmouover和onmouseout相同。原理就是当鼠标在元素内部移动时，子元素不会因为事件冒泡而触发onmouse事件，onmouse事件只对绑定的父元素有效。

3.还有一种解决方法，只有在你的子元素不需要执行任何鼠标事件时使用，就是给子元素设置css属性pointer-events： none；，MDN对none的解释：将pointer-events设置为none以后，该元素永远不会成为鼠标事件的对象，也就是不会对任何鼠标事件有响应，比如onclick等。