🔰touch event
browser ⟩ event ⟩ type ⟩ touch
"touchstart" - finger (may be another finger) touches the screen.
"touchmove" - finger moved while touching.
"touchend" - finger leaves the screen (other fingers may still be touching).
"touchcancel" - a touch point has been disrupted in some way.
If you tap the screen, you’ll get
touch events:"touchstart", "touchend", then
mouse events:"mousedown", "mouseup", "click"❗
if you tap the screen with 2 fingers, it may tigger events like the following:
// touch events
touchstart: [(311, 125), (213, 136)] // 2 fingers simultaneously
touchend : [] // fingers leave
// then mouse events
mousedown : (262, 131) // ⭐️ average point of 2 fingers
mouseup : (262, 131)
click : (262, 131)
or the following:
// touch events first
touchstart: [(295, 138)] // first finger comes in
touchstart: [(295, 138), (197, 149)] // second finger comes in
touchend : [(295, 138)] // second finger leaves
touchend : [] // first finger leaves
// then mouse events
mousedown : (246, 144) // ⭐️ average point of 2 fingers
mouseup : (246, 144)
click : (246, 144)
if you touch the screen
with 1 finger (and hold)
and then with a second finger
release second finger
release first finger
it might tigger events like the following:
// only touch events
touchstart: [(226, 129)] // first finger comes in
touchmove : [(225, 128)] // first finger may move around
touchmove : [(225, 129)] // ...
touchmove : [(224, 129)] // ...
touchstart: [(224, 129), (372, 108)] // second finger comes in
touchend : [(224, 129)] // second finger leaves
touchend : [] // first finger leaves
// ⭐️ without any mouse events❗️
Last updated
Was this helpful?