When to use touchmove vs mousemove?

Question

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?

score 62 · Accepted Answer · edited May 24 '21 at 07:33

62

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.

edited May 24 '21 at 07:33

Kevin M. Mansour

2,915
6
18
35

answered Nov 22 '12 at 10:50

Konstantin Dinev

34,219
14
75
100

3

That is right, BUT :
if you add the touch events it will NOT work like the mouse events.
What we make for the touch mobile phone will NOT run on the PC. – Soliman Nov 27 '12 at 08:25
4

Shouldn'd be (Mousemove && (MousedownHasFired && MouseupHasNotYetBeFired)) === TouchMove? – Juan Garcia Jun 05 '14 at 18:41
4

That's not true, mousemove ~= touchmove With mousemove, it take the hovered element but with touchmove it takes the first touched element. – eveevans Feb 21 '18 at 21:20
what can i do if i need below https://stackoverflow.com/questions/58934867/touch-move-working-diffrently-than-mousemove – Mahesh Nov 20 '19 at 05:41
2

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`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action). Any clarification under which circumstances this statement holds would be appreciated. – bluenote10 Jan 09 '21 at 17:15

score 3 · Answer 2 · answered Apr 24 '14 at 03:48

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

score 2 · Answer 3 · answered Mar 09 '22 at 06:59

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

When to use touchmove vs mousemove?

3 Answers3

Linked