touch event

"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❗️

replit ⟩ tap screen , require ⟩ Array extension, TouchList extension

const { log } = console
const { max } = Math;

// ⭐️ import
import { } from './js/ext/TouchList_ext.js';      // TouchList extension
import { } from './js/ext/Array_ext.js';          // Array extension
// --------------------------------------------------------------------

const touchEvents = ['touchstart', 'touchmove', 'touchend'];
const mouseEvents = ['mousedown', 'mouseup', 'click'];
const eventTypes = [...touchEvents, ...mouseEvents];
const padLength = eventTypes.maxIn(x => x.length);    // 👔 Array extension

// ⭐️ general handler
function update(event) {

    let points;
    
    if (mouseEvents.includes(event.type)) {
        // mouse events
        const {pageX, pageY} = event;
        points = `(${pageX}, ${pageY})`;
    } else {
        // touch events
        points = `${event.touches}`;    // 👔 TouchList extension
    }

    log(`${event.type.padEnd(padLength, ' ')}: ${points}`);
    
}

// ⭐️ listen to mouse/touch events
eventTypes.forEach(type => 
    document.body.addEventListener(type, update)
);

mouse event
box models
capturing phase - use {passive: false} to prevent touch screen default actions.

Previousmouse event coords Next.touches

Last updated 2 years ago

Was this helpful?

// 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)

// 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)

// 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❗️

const { log } = console const { max } = Math; // ⭐️ import import { } from './js/ext/TouchList_ext.js'; // TouchList extension import { } from './js/ext/Array_ext.js'; // Array extension // -------------------------------------------------------------------- const touchEvents = ['touchstart', 'touchmove', 'touchend']; const mouseEvents = ['mousedown', 'mouseup', 'click']; const eventTypes = [...touchEvents, ...mouseEvents]; const padLength = eventTypes.maxIn(x => x.length); // 👔 Array extension // ⭐️ general handler function update(event) { let points; if (mouseEvents.includes(event.type)) { // mouse events const {pageX, pageY} = event; points = `(${pageX}, ${pageY})`; } else { // touch events points = `${event.touches}`; // 👔 TouchList extension } log(`${event.type.padEnd(padLength, ' ')}: ${points}`); } // ⭐️ listen to mouse/touch events eventTypes.forEach(type => document.body.addEventListener(type, update) );