When to use touchmove vs mousemove?
Asked Answered
V

3

36

I build a web mobile game, it runs on browsers (PC/Mobile).

Do I need to use the touchmove or not?

How can I run the touchmove event like the mousemove event?

Varden answered 22/11, 2012 at 10:45 Comment(0)
B
64

For parity between desktop and touch you have the following equivalences:

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

Thus if you handle mousedown, mousemove and mouseup then you don't need to handle the corresponding equivalent events under touch. The same handlers should be executing.

Bustup answered 22/11, 2012 at 10:50 Comment(6)
That is right, BUT : <br/> if you add the touch events it will NOT work like the mouse events. <br/> What we make for the touch mobile phone will NOT run on the PC.Varden
Shouldn'd be (Mousemove && (MousedownHasFired && MouseupHasNotYetBeFired)) === TouchMove?Arsenious
That's not true, mousemove ~= touchmove With mousemove, it take the hovered element but with touchmove it takes the first touched element.Galateah
what can i do if i need below #58935367Entoderm
It appears as if the last paragraph is a slight over-simplification. I have implemented mousedown + mousemove + mouseup, but when I use my app on a touch device, none of them fire. This may be either (1) browser-specific, (2) due to synthetic event handler behavior in React, or perhaps (3) a result of some CSS properties like e.g. touch-action. Any clarification under which circumstances this statement holds would be appreciated.Pupil
Touch events are not the same as mouse events. Touch requires pressing, while mouse events can involve just hovering. This makes sense when dealing with a draggable elements such as carousel...Tanner
S
3

Except on the ipad -- where mouse hover, mouse down, mouse up and click are all triggered... except if you change anything in mouse hover .. then nothing else gets triggered.... very annoying...more details see http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

Sailcloth answered 24/4, 2014 at 3:48 Comment(0)
G
2

you can use both in one component (w.r.t react) for eg: <component onMouseMove={handleMouseMove} onTouchMove={handleMouseMove} /> on the bases of screen which is being used react will automatically switch either option of mouse or touch or you can also use ("ontouchstart" in document.documentElement) it gives true for touch screen device and vice versa ref: https://codepen.io/tteske/pen/KKwxOxp

Grudge answered 9/3, 2022 at 6:59 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.