何时使用touchmove和mousemove？

Question

我制作了一个web移动游戏，它可以在浏览器（PC/移动设备）上运行。

我需要使用 touchmove 吗？

如何使 touchmove 事件像 mousemove 事件一样运行？

- Soliman

Answer 1

为了在桌面和触摸之间保持同步，您可以使用以下等效性：

mousedown === touchstart
mousemove === touchmove
mouseup === touchend

因此，如果您处理 mousedown，mousemove 和 mouseup ，则无需在触摸下处理相应的等效事件。应执行相同的处理程序。

因此，如果您处理 mousedown，mousemove 和 mouseup 事件，则无需处理相应的触摸事件，应使用相同的处理程序。

- Konstantin Dinev

---

没错，但是如果你加入触摸事件，它将不能像鼠标事件一样工作。我们为触摸手机设计的内容将无法在电脑上运行。 - Soliman

“（Mousemove &&（MousedownHasFired && MouseupHasNotYetBeFired））=== TouchMove” 应该翻译成“难道不应该（在鼠标移动事件和鼠标已按下但尚未释放的情况下）等同于触摸移动事件吗？” - Juan Garcia

不是这样的，mousemove ~= touchmove。使用mousemove时，它会获取鼠标悬停在的元素，但使用touchmove时，它会获取第一个被触摸的元素。 - eveevans

如果我需要以下内容 https://stackoverflow.com/questions/58934867/touch-move-working-diffrently-than-mousemove，我该怎么办？ - Mahesh

似乎最后一段话有点过于简化了。我已经实现了 mousedown + mousemove + mouseup，但是当我在触摸设备上使用我的应用程序时，它们都没有触发。这可能是 (1) 浏览器特定的，(2) 由于 React 中合成事件处理程序的行为，或者 (3) 由于某些 CSS 属性，例如 touch-action 的结果。任何澄清此声明适用情况的信息将不胜感激。 - bluenote10

Answer 2

除了在iPad上，鼠标悬停、按下、抬起和单击都会触发... 除非您更改了鼠标悬停中的任何内容... 然后不会触发任何其他事件... 非常令人烦恼... 更多详细信息请参见http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

- guest

Answer 3

您可以在一个组件中同时使用鼠标和触摸两种操作（相对于React而言）。 例如： <component onMouseMove={handleMouseMove} onTouchMove={handleMouseMove} /> 根据所使用的屏幕，React会自动切换到鼠标或触摸操作，或者您也可以使用以下方式： ("ontouchstart" in document.documentElement) 它会返回true表示是触摸屏设备，反之则为false。 参考链接：https://codepen.io/tteske/pen/KKwxOxp

- Rahil Siddique