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

Question

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

我想检测用户是否在我的 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

对于任何试图在网络应用程序中处理触摸事件的人来说，这里是有用的文档 W3C - Touch Events，其中详细解释了事件及其处理方式。

WC3 状态：

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

简而言之：

您可以只处理与触摸事件相关的鼠标事件，而不是同时处理触摸和鼠标事件。

Answer 3

2019: Yes-ish: 使用 pointerenter.

默认情况下，触摸会导致浏览器指向 'capture' 指针，以便后续事件的范围限定为该触摸元素。这会阻止 pointerleave/enter 事件，除非您明确释放捕获。此外，您需要在相关元素上设置 touch-action:none 以避免浏览器拦截默认 pan/zoom 等的触摸

示例：

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]

工作

Answer 4

我只是想对之前的发帖者说声谢谢。他的建议非常奏效。数周以来，我一直在努力寻找解决方案。如果您在 pointerdown 处理函数中使用 Svelte，我建议您使用：

const pointerDownHandler = (event) => {
    // whatever logic you need
    event.target.releasePointerCapture(event.pointerId);
}

他说这部分是关键是准确的。没有它就不行。

Answer 5

在 Touchenter/Touchleave 问题中回答了这个问题。请检查。

Answer 6

我会为 Ian 的回答做一个澄清：
mouseenter 事件等同于 pointerenter 事件。但它不会开箱即用。要使其正常工作，您应该：

添加到父元素 pointerdown 事件侦听器 releasePointerCapture 方法

div.addEventListener("pointerdown",(e) => e.target.releasePointerCapture(e.pointerId))

添加到父项和您的元素 touch-action: none CSS 属性.

尽情享受吧:)

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

JS: Touch equivalent for mouseenter

javascript

touch

mouseenter