如何在离开模态框时强制移除cursor-visible类？

要解决离开模态框后不移动鼠标就不隐藏自定义光标的问题，只需给模态框添加mouseleave事件监听，一旦鼠标离开模态框区域，直接移除光标可见类即可。另外还要修正原代码中判断鼠标是否在模态框内的逻辑——原代码用event.target === modalRoot只能识别鼠标直接在#modal-root元素上的情况，无法覆盖模态框内部子元素，应该改用contains()方法判断。

修改后的代码 #

JavaScript 部分

const modalRoot = document.getElementById("modal-root");
const $cursor = $(".cursor"); // 提前缓存DOM元素，提升性能

// 鼠标移动时更新光标状态和位置
window.addEventListener("mousemove", function(event) {
  if (modalRoot.contains(event.target)) {
    $cursor.addClass("cursor-visible");
    $cursor.css({
      top: `${event.clientY + 15}px`,
      left: `${event.clientX + 15}px`
    });
  } else {
    $cursor.removeClass("cursor-visible");
  }
});

// 鼠标离开模态框时直接隐藏光标
modalRoot.addEventListener("mouseleave", function() {
  $cursor.removeClass("cursor-visible");
});

HTML 部分

<section id="modal-root">
  <div class="modal">
    <span class="quit_cross">x</span>
    <div class="content"></div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关键说明 #

• mouseleave事件会在鼠标完全离开模态框（包括内部子元素）时触发，此时直接执行移除类的操作，无需等待鼠标移动。
• 使用modalRoot.contains(event.target)替代原判断，确保鼠标在模态框内部任何元素上时，都能正确显示自定义光标。
• 提前缓存$(".cursor")避免重复DOM查询，优化性能。

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