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

debugcn 发表于 Dev

hdw3

我试图创建可拖动的棋子，但找不到任何方法将棋子放到正方形上，因为当我在拖动棋子时将鼠标悬停在可放下位置上时，mouseenter事件不会触发。我注意到这z-index是因为当我z-index在可拖动的物件上放下一个物件时，该mouseenter事件起作用了，但这并不理想，因为我再也看不到要拖动的物件了。

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

即使鼠标隐藏在另一个HTML元素的后面，有没有一种方法可以强制mouseenterormouseover事件触发？我的目标是检测何时将我拖到一个可放置的位置，以便可以将我的作品从一个div移到另一个。我在这个老问题中发现了类似的问题，但是我真的不喜欢跟踪每个可div放置对象的xy坐标，或者不喜欢在div具有高高度的可放置对象上创建透明元素，z-index因此我希望为此提供一个更清洁的解决方案。

特伦托

基于通过图层/ div转发鼠标事件，看起来您只需要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。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-1

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章