何时使用 touchmove 与 mousemove？答案

【问题标题】：When to use touchmove vs mousemove?何时使用 touchmove 与 mousemove？
【发布时间】：2022-03-09 14:59:59
【问题描述】：

我构建了一个网络手机游戏，它在浏览器（PC/Mobile）上运行。

我是否需要使用touchmove？

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

【问题讨论】：

标签： javascript html mouseevent mousemove touchmove

【解决方案1】：

对于桌面和触控之间的平等，您有以下等价物：

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

因此，如果您处理mousedown、mousemove 和mouseup，那么您不需要处理相应的触摸下的等效事件。应该执行相同的处理程序。

【讨论】：

没错，但是：
如果你添加了触摸事件，它就不会像鼠标事件那样工作了。
我们为触控手机做的东西不会在PC上运行。
应该是 (Mousemove && (MousedownHasFired && MouseupHasNotYetBeFired)) === TouchMove？
这不是真的，mousemove ~= touchmove 使用 mousemove，它获取悬停的元素，但使用 touchmove 获取第一个触摸的元素。
如果我需要低于stackoverflow.com/questions/58934867/…，我该怎么办
看起来好像最后一段有点过度简化了。我已经实现了mousedown + mousemove + mouseup，但是当我在触摸设备上使用我的应用程序时，它们都没有触发。这可能是 (1) 特定于浏览器的，(2) 由于 React 中的合成事件处理程序行为，或者可能是 (3) 某些 CSS 属性的结果，例如touch-action。任何澄清本声明适用的情况将不胜感激。

【解决方案2】：

除了在 ipad 上——鼠标悬停、鼠标向下、鼠标向上和单击都会触发...除非您在鼠标悬停中更改任何内容..然后不会触发其他任何东西...非常烦人...更多详情见http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

【讨论】：

【解决方案3】：

您可以在一个组件中同时使用两者（w.r.t react）例如： <component onMouseMove={handleMouseMove} onTouchMove={handleMouseMove} /> 在正在使用的屏幕的基础上，react 将自动切换鼠标或触摸选项或者你也可以使用 ("ontouchstart" in document.documentElement) 它适用于触摸屏设备，反之亦然参考：https://codepen.io/tteske/pen/KKwxOxp

【讨论】：