javascript - JS : Touch equivalent for mouseenter

Question

是否有相当于鼠标输入的触摸。

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

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

网址:http://dizzyn.github.io/piano-game/ - 使用鼠标工作正常(鼠标按下并滑动；不适用于触摸滑动)

谢谢

Answer 1

2019:是的:使用 pointerenter。

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

此外，您需要在相关元素上设置 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 正式发布时我们就会清楚了。 [我已经提交了一个错误，看起来有人在处理它。]

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