指针事件：无在移动设备上不起作用

Question

我正在处理 Vue 的自定义拖放模块，但我发现了一个问题。 要在指针向下时覆盖浏览器 D&D（因为我需要），我要克隆要拖动的 div，然后触发指针移动（在此事件中，我在克隆的 div 上设置 X 和 Y），当我向上触发指针时，这个 div 的值被转移到拖动的地方。 为了在指针向上事件中克隆（拖动）div 下的目标元素，我使用了一个 css 属性 pointer-events: none （在克隆的 div 上）并且桌面上的一切都很好。 在移动设备上，事件定位总是拖动元素。

有来自触发事件的 console.log：记录的事件

Answer 1

现代移动浏览器改用“touch-action”CSS 属性。 您可以在此处阅读所有相关信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/touch-action

只需添加touch-action: none; 到您添加pointer-events: none;的同一元素pointer-events: none; 到。

否则，根据您设置 vue 组件的方式，您可能需要监听 'touchstart' 和 'touchend' 事件并取消它们：

<TargetElement>.addEventListener( 'touchstart', e => e.preventDefault )

Answer 2

我在另一个问题中找到了我的问题的答案： How to find the actual event.target of touchmove javascript event?

我们可以通过document.elementFromPoint( e.clientX, e.clientY );在我们的事件下定位元素document.elementFromPoint( e.clientX, e.clientY );