为什么鼠标移出media-slider-wrap区域后slider-paging元素未消失？

问题根因 #

• 绝对定位的.slider-paging元素本身会响应鼠标事件，当你慢速移动鼠标移出滑块区域时，鼠标会短暂悬停在.slider-paging元素上，此时会被判定为仍在父元素.slider的交互范围内，导致mouseleave事件无法触发。
• 同时原有代码中_this变量未加声明，会意外成为全局变量，存在多滑块场景下的逻辑隐患。

修复方案 #

1. 给.slider-paging添加pointer-events: none属性，让该元素完全不接收鼠标事件，不会阻断父元素的鼠标事件触发。
2. 优化JS变量声明，避免全局污染，同时缓存DOM查询对象优化性能。

修正后CSS #

.media-slider-wrap {
  width: fit-content;
}
.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display:none;
  /* 新增下方属性 */
  pointer-events: none;
}
.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}

修正后JS #

$(document).ready(function(){
  $(".slider").each(function () {
      // 添加let声明，避免变量泄露为全局变量
      let _this = $(this);

      _this.mousemove(function(e){
          var rect = e.currentTarget.getBoundingClientRect();
          var x = e.clientX - rect.left;
          var y = e.clientY - rect.top;
          // 缓存选择器，减少重复DOM查询
          const paging = $(this).find('.slider-paging');
          paging.show();
          paging.css({"top": y, "left": x});
      });
      _this.mouseleave(function(e){
          $(this).find('.slider-paging').hide();
      });
  });
});

内容的提问来源于stack exchange，提问作者monsaic123