JS：鼠标输入的触摸等效项答案

【问题标题】：JS: Touch equivalent for mouseenterJS：鼠标输入的触摸等效项
【发布时间】：2015-01-12 18:21:50
【问题描述】：

是否有相当于 mouseenter 的触控功能。

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

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

该站点：http://dizzyn.github.io/piano-game/ - 可以使用鼠标正常工作（鼠标向下滑动；不能使用触摸幻灯片）

谢谢

【问题讨论】：

标签： javascript touch mouseenter

【解决方案1】：

2019：Yes-ish：使用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 中工作]

【讨论】：

【解决方案2】：

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

WC3 状态：

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

简而言之：

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

【讨论】：

【解决方案3】：

调查这些事件：

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

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

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

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

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

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

特别是 touchenter 和 touchleave。

http://www.javascriptkit.com/javatutors/touchevents.shtml

【讨论】：

谢谢，Crome（Win8）似乎没有实现“touchenter”。这让我很困惑。
touchenter 和 touchleave 是 deprecated by the w3c，如 this commenter on another thread 所述。
这不应该是一个公认的答案，因为我试图找出完全相同的问题。我有我想要的鼠标点单击拖动的现有功能，我正在尝试为触摸设备创建它。此人的“答案”没有提供有关如何通过触摸重新创建该效果的信息，并且还提供了不正确的信息，因为其他人已经表示 touchenter 和 touchleave 不再是规范的一部分......
虽然触摸事件已被弃用，但目前 (5/2020) 在大多数主要浏览器中（不在桌面 Safari 中，但在移动 Safari 中是）仍然支持它们，根据我的经验，它们是，在进行自定义多点触控交互时更容易使用。因此，如果您正在制作需要持续一段时间的东西，那么它们显然是一个糟糕的选择——但是，如果您尝试在移动浏览器中对多点触控交互进行原型设计，包括触控输入响应……它们仍然是工具箱里有一把锋利的刀。

【解决方案4】：

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

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

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

【讨论】：

我对此感到困惑。所以我有元素，在悬停时使用 css 类会改变颜色，因此对于移动设备上的触摸，它保持悬停状态，直到单击其他地方。这是否应该以某种方式从 el 中释放该指针，我在 el 上有 on:pointerdown={pointerDownHandler} 并且我在 css 中添加了 *{ touch-action: none; } 并不是我完全理解这一点。是否有像手动鼠标位置这样的手动鼠标位置，我必须将其设置为屏幕上的其他部分，例如 0,0 或pointerleave 上的其他部分，在这种情况下为什么不这样做。在触摸端
为什么甚至需要向下指针？只需使用指针进入和离开，对吗？在这种情况下，需要设置 isHovered 之类的变量，并将其用于没有原生 CSS 悬停工作的条件类。我很困惑

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

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

享受:)

【讨论】：