当光标隐藏在其他 HTML 元素后面时如何触发 mouseenter 事件？

Posted 2023-05-08

【中文标题】当光标隐藏在其他 HTML 元素后面时如何触发 mouseenter 事件？

【英文标题】：How to fire mouseenter event when cursor is hidden behind other HTML element?

【发布时间】：2021-05-23 07:49:28

【问题描述】：

我正在尝试创建可拖动的棋子，但我找不到任何将棋子放在正方形上的方法，因为当我在拖动棋子时将鼠标悬停在可放置的位置上时，mouseenter 事件不会触发。我注意到z-index 是原因，因为当我将较低的z-index 放在可拖动的部分上时，mouseenter 事件会起作用，但这并不理想，因为我看不到我正在拖动的部分。

这是模拟相同行为的codepen（您必须打开控制台）。当鼠标进入黑框时，mouseenter 事件触发，但如果鼠标在拖动蓝框时进入，则mouseenter 事件不会触发。

有没有办法强制mouseenter 或mouseover 事件触发，即使鼠标隐藏在另一个html 元素后面？我的目标是检测我何时拖动到一个可放置的位置，以便我可以将我的作品从一个div 移动到另一个。 我在这个old question 中发现了类似的问题，但我真的不喜欢跟踪每个可放置div 的xy 坐标，或者在高z-index 的可放置div 上创建透明元素，所以我希望有一个清洁器解决方案。

【问题讨论】：

您能否制作一个有效的 sn-p，以便更容易看到发生了什么。谢谢。我也不懂这个语法：makeDroppable(element: HTMLElement)

@AHaworth 这不是普通的 javascript，我使用的是打字稿和角度。这只是一个以 HtmlElement 作为参数的函数。我将在今天晚些时候尝试创建一个 sn-p

谢谢，也许用你正在使用的系统标记问题，所以我们不会试图将其解释为纯 JS。

@AHaworth 我看不到 typescript 或 Angular 在这里有什么意义

@AHaworth 我已将帖子中的代码替换为 codepen sn-p codepen.io/hdw3/pen/poNrKpo 以避免混淆。希望这会有所帮助

【参考方案1】：

基于Forwarding Mouse Events through layers/divs，看起来您只需修改您的draggable CSS，添加...

pointer-events: none;

...这样就变成了...

.draggable
  cursor: grab;
  position:absolute;
  z-index: 5;
  --size: calc(100% - 2*var(--padding));
  pointer-events: none;

这是做什么的？当拖动开始并将draggable 类应用于被拖动元素时，它会关闭被拖动元素的鼠标事件，从而允许鼠标事件通过被拖动元素传递到下面的任何元素。

（有关选项和浏览器支持的完整列表，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。）