JS：触摸等效于mouseenter

Question

有没有相当于mouseenter的触摸。

我想检测用户是否在我的DIV上滑动。

我更喜欢直接取决于目标元素的解决方案而不是父元素上的重新计算位置等。

网站：http://dizzyn.github.io/piano-game/ - 使用鼠标工作正常（鼠标向下和滑动;不使用触摸幻灯片）

谢谢

Answer 1

看看这些事件：

touchstart当用户与触摸表面接触并在事件绑定到的元素内创建触摸点时触发。

touchmove当用户在触摸表面上移动触摸点时触发。

touchend当用户从曲面移除触摸点时触发。无论触摸点是在绑定元素内部还是外部移动时触发都会触发，例如，如果用户的手指首先滑出元素或者甚至离开屏幕边缘。

touchenter触摸点进入绑定元素时触发。这个事件没有泡沫。

touchleave触摸点离开绑定元素时触发。这个事件没有泡沫。

touchcancel当触摸点不再在触摸表面上注册时触发。例如，如果用户将触摸点移动到浏览器UI之外或移动到插件中，或者弹出警报模式，则会发生这种情况。

特别是touchenter和touchleave。

http://www.javascriptkit.com/javatutors/touchevents.shtml

Answer 2

对于那些试图在Web应用程序中处理触摸事件的人来说，这里有一个有用的文档W3C - Touch Events，它详细解释了事件以及如何处理它们。

WC3声明：

如果Web应用程序可以处理触摸事件，则它可以拦截它们，并且用户代理不需要调度相应的鼠标事件。如果Web应用程序不是专门为触摸输入设备编写的，则它可以对后续鼠标事件做出反应。

Answer 3

2019年：是的：使用pointerenter。

默认情况下，触摸会使浏览器“捕获”指针，以便将以下事件限定为触摸的元素。除非您明确释放捕获，否则这会阻止pointerleave / enter事件。此外，我很确定你必须在相关元素上设置touch-action:none，以避免浏览器拦截默认平移/缩放等触摸。

例：

CSS：

*{ touch-action: none; } 

JS：

let div = document.querySelector("div")
div.addEventListener("pointerdown",(e)=>{
    console.log("down")
    console.log("attempt release implicit capture")
    div.releasePointerCapture(e.pointerId) // <- Important!
})
div.addEventListener("pointerenter",(e)=>{
    console.log("enter")
})
div.addEventListener("pointerleave",(e)=>{
    console.log("leave")
})

至少在Chrome中运行。虽然在Mobile Safari 13 beta中没有那么多......根据w3c规范，我相当肯定它应该以这种方式工作。也许当iOS 13正式发布时，我们将会清楚。 [我已经提交了一个错误，看起来它正在被关注。]