JS:鼠标输入的触摸等效项

JS: Touch equivalent for mouseenter

本文关键字：触摸鼠标输入 JS 更新时间：2023-09-26

是否有鼠标输入的触摸等效物。

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

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

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

谢谢

> 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中工作。不过在移动野生动物园 13 测试版中没有那么多......根据 w3c 规范，我相当确定它应该以这种方式工作。也许当iOS 13正式发布时，我们会清楚。[我已经提交了一个错误，看起来它正在被处理。

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

查看以下事件：

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

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

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

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

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

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

特别是touchenter和touchleave.

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

对于尝试在 Web 应用程序中处理触摸事件的任何人，这里有有用的文档 W3C - 触摸事件，其中详细解释了事件及其处理方式。

WC3 指出：

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

总之：

您只能处理相对于触摸事件的鼠标事件，而不能同时处理触摸和鼠标事件。

我只想对之前的海报说声谢谢。他的建议非常有效。几个星期以来，我一直在努力寻找解决方案。如果您在pointerdown处理程序函数中使用 Svelte，我建议使用：

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

他说这部分是关键是准确的。没有它，它将无法工作。

在 Touchenter/Touchleave 問題上回答了這個問題。请检查。

https://stackoverflow.com/a/61179966/835753

我会为

伊恩的答案澄清一下：
mouseenter事件的等效项是pointerenter事件。但它不会开箱即用。要使其正常工作，您应该：

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

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

添加到父级和元素touch-action: none CSS 属性。

享受:)