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

Question

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

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

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

Answer 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 class 应用于被拖动的元素时，它会关闭被拖动元素的鼠标事件，从而允许鼠标事件通过被拖动的元素传递到下面的任何元素。

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

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

How to fire mouseenter event when cursor is hidden behind other HTML element?

html

javascript

css

drag-and-drop

z-index