Javascript JS:mouseenter的触摸等价物

有没有一种触摸功能相当于鼠标

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

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

该网站：-适用于鼠标（鼠标向下滑动；不适用于触摸滑动）

---

谢谢你

看看这些事件：

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

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

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

触摸点进入绑定到元素时触发TouchCenter。这一事件没有泡沫

当接触点离开绑定到元素时触发touchleave。这一事件没有泡沫

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

特别是触摸输入和触摸离开

---

对于试图在web应用程序中处理触摸事件的任何人，这里提供了有用的文档，详细解释了事件及其处理方式

WC3状态：

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

简而言之：

---

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

2019：是：使用

pointerenter

默认情况下，触摸会导致浏览器“捕获”指针，从而将以下事件的范围限定到该触摸元素。这将防止pointerleave/enter事件，除非您显式释放捕获。此外，您还需要在相关元素上设置

touch action:none

，以避免浏览器拦截默认平移/缩放等操作

例如：

CSS:

JS:

let div=document.querySelector（“div”）
div.addEventListener（“pointerdown”，（e）=>{
控制台日志（“关闭”）
log（“尝试释放隐式捕获”）
div.releasePointerCapture（e.pointerId）//{
控制台日志（“输入”）
})
div.addEventListener（“pointerleave”，（e）=>{
控制台日志（“离开”）
})

至少在Chrome上可以工作。但在Mobile Safari 13 beta版中没有这么多…根据w3c规范，我相当确定它应该是这样工作的。也许当iOS 13正式发布时，我们就可以清楚了。[我已经提交了一个bug，看起来它正在被处理。]

---

[更新：iOS 13问题已解决。应该可以在Chrome/FF/Safari中使用]

我只是想对上一张海报说声谢谢。他的建议非常有效。我已经努力寻找解决方案好几个星期了。如果你在

指针下降

处理函数中使用Svelte，我建议使用：

const pointerDownHandler=（事件）=>{
//不管你需要什么逻辑
event.target.releasePointerCapture（event.pointerId）；
}

---

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

在触摸输入/触摸离开问题上回答了这个问题。 请查收

---

谢谢，似乎Crome（Win8）中没有实现“TouchCenter”。这让我很困惑。touchenter和touchleave是，正如所指出的。这不应该是一个公认的答案，因为我正试图找出完全相同的问题。我通过鼠标点击拖动拥有我想要的现有功能，我正试图为触摸设备创建它。此人的“答案”没有提供有关如何使用touch重新创建该效果的信息，也有完全不正确的信息，因为其他人已声明touchenter和touchleave不再是规范的一部分……虽然touch事件已被弃用，但它们目前（2020年5月）在大多数主要浏览器中仍然受支持（不是在桌面Safari中，而是在mobile Safari中受支持）根据我的经验，在进行自定义多点触摸交互时，它们更易于使用。因此，如果你正在制作一些需要持续一段时间的东西，它们显然是一个糟糕的选择——但是，如果你试图在移动浏览器中模拟多点触摸交互，包括触摸输入响应……它们仍然是工具箱中的一把利刀.

*{ 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")
})