JS：鼠标输入的触摸等价物

Question

是否有相当于 mouseenter 的触摸。

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

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

网站：http: //dizzyn.github.io/piano-game/ - 使用鼠标可以正常工作（鼠标向下滑动；不适用于触摸滑动）

谢谢

原文由 Tomas Randus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看这些事件：

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

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

touchend 当用户从表面移除触摸点时触发。无论触摸点是在绑定到的元素内部还是外部（例如，如果用户的手指先滑出元素，甚至滑出屏幕边缘），它都会触发。

touchenter 触摸点进入绑定元素时触发。此事件不会冒泡。

touchleave 触摸点离开绑定元素时触发。此事件不会冒泡。

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

特别是 touchenter 和 touchleave 。

来源：http: //www.javascriptkit.com/javatutors/touchevents.shtml

原文由 Abbara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2019 年：是的：使用 pointerenter 。

但是，默认情况下，触摸（或按下鼠标）会导致元素“捕获”指针，从而防止进一步的指针离开/输入事件，除非您明确释放捕获。

此外，您需要在相关元素上设置 touch-action:none 以避免浏览器拦截默认平移/缩放等的触摸。

例子：

CSS：

 *{ touch-action: none; }

记者：

 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 正式发布时我们就会清楚了。 [我已经提交了一个错误，看起来有人在处理它。]

[ 更新：iOS 13 问题已修复。应该在 Chrome/FF/Safari 中工作]

原文由 Ian 发布，翻译遵循 CC BY-SA 4.0 许可协议