javascript JS：鼠标输入的触摸等效项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27908339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS: Touch equivalent for mouseenter
提问by Tomas Randus
is there a touch equivalent of the mouseenter.
是否有相当于 mouseenter 的触摸功能。
I would like to detect if user slide on my DIV.
我想检测用户是否在我的 DIV 上滑动。
I prefer a solution depending directly on the target element not on a parent element with recounting positions etc.
我更喜欢直接取决于目标元素而不是具有重新计数位置等的父元素的解决方案。
The site: http://dizzyn.github.io/piano-game/- works fine with mouse (mouse down and slide; not working with touch slide)
网站：http: //dizzyn.github.io/piano-game/- 使用鼠标工作正常（鼠标向下滑动；不适用于触摸滑动）
Thank you
谢谢
采纳答案by Abbara
Look into these events:
查看这些事件：
touchstart Triggers when the user makes contact with the touch surface and creates a touch point inside the element the event is bound to.
touchstart 当用户接触触摸表面并在事件绑定到的元素内创建一个触摸点时触发。
touchmove Triggers when the user moves the touch point across the touch surface.
touchmove 当用户在触摸表面上移动触摸点时触发。
touchend Triggers when the user removes a touch point from the surface. It fires regardless of whether the touch point is removed while inside the bound-to element, or outside, such as if the user's finger slides out of the element first or even off the edge of the screen.
touchend 当用户从表面上移除一个触摸点时触发。无论触摸点是在绑定到元素内部还是外部移除，例如用户的手指首先滑出元素甚至离开屏幕边缘，它都会触发。
touchenter Triggers when the touch point enters the bound-to element. This event does not bubble.
touchenter 当触摸点进入绑定元素时触发。此事件不冒泡。
touchleave Triggers when the touch point leaves the bound-to element. This event does not bubble.
touchleave 当触摸点离开绑定元素时触发。此事件不冒泡。
touchcancel Triggers when the touch point no longer registers on the touch surface. This can occur if the user has moved the touch point outside the browser UI or into a plugin, for example, or if an alert modal pops up.
touchcancel 当触摸点不再在触摸表面上注册时触发。例如，如果用户将触摸点移到浏览器 UI 之外或移到插件中，或者如果弹出警报模式，就会发生这种情况。
Specifically touchenter and touchleave.
特别是 touchenter 和 touchleave。
回答by yardpenalty.com
For anyone who is trying to handle touch events in a web app here is helpful documentation W3C - Touch Eventswhich explains the events in detail and how they are handled.
对于尝试在 Web 应用程序中处理触摸事件的任何人，这里是有用的文档W3C - Touch Events，其中详细解释了事件及其处理方式。
WC3 states:
WC3 规定：
If a Web application can process touch events, it can intercept them, and no corresponding mouse events would need to be dispatched by the user agent. If the Web application is not specifically written for touch input devices, it can react to the subsequent mouse events instead.
如果 Web 应用程序可以处理触摸事件，它就可以拦截它们，并且用户代理不需要派发相应的鼠标事件。如果 Web 应用程序不是专门为触摸输入设备编写的，它可以改为对后续的鼠标事件做出反应。
In short:
简而言之：
You can merely handle mouse events relative to touch events instead of handling both touch and mouse events.
您只能处理与触摸事件相关的鼠标事件，而不是同时处理触摸和鼠标事件。
回答by Ian
2019: Yes-ish: Using pointerenter.
2019 年：是的：使用pointerenter.
By default, a touch causes a browser to 'capture' the pointer such that following events are scoped to that touched element. This prevents pointerleave/enter events, unless you explicitly release the capture. Also, I'm pretty sure you have to set touch-action:noneon relevant elements to avoid the browser intercepting touches for default pan/zoom etc.
默认情况下，触摸会导致浏览器“捕获”指针，以便将后续事件限定为该触摸元素。这可以防止 pointerleave/enter 事件，除非您明确释放捕获。此外，我很确定您必须设置touch-action:none相关元素以避免浏览器拦截默认平移/缩放等的触摸。
Example:
例子：
CSS:
CSS：
*{ touch-action: none; }
JS:
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")
})
Works in Chrome at least. Not so much in Mobile Safari 13 beta though... According to the w3c specs, I'm fairly certain it shouldwork this way. Maybe when iOS 13 is officially released we'll be in the clear. [I've filed a bug and looks like it's being attended to.]
至少适用于 Chrome。不过，在 Mobile Safari 13 beta 中并没有那么多......根据 w3c 规范，我相当确定它应该以这种方式工作。也许当 iOS 13 正式发布时，我们就清楚了。[我提交了一个错误，看起来它正在被处理。]
[Update: iOS 13 issue fixed.]
[更新：iOS 13 问题已修复。]
回答by Brent Brinkley
I just wanted to say thank you to the previous poster. His suggestion worked perfectly. And I've been struggling to find a solution to this for weeks. If you're using Svelte within your pointerdownhandler function I would suggest using:
我只是想对上一张海报说声谢谢。他的建议非常奏效。数周以来，我一直在努力寻找解决方案。如果您在pointerdown处理程序函数中使用 Svelte，我建议您使用：
const pointerDownHandler = (event) => {
// whatever logic you need
event.target.releasePointerCapture(event.pointerId);
}
He's accurate in saying this part is key. It will not work without it.
他准确地说这部分是关键。没有它就行不通。
