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

🔴 主題

• touch event properties

  • .touches

  • .targetTouches

• extensions

  • TouchList+ext

💈範例

• 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.

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Touch Events ⭐️

📘 手冊

• Event ⟩ UIEvent ⟩ TouchEvent
• Touch events
• Using Touch Events
• Touch ⟩

  • (.pageX, .pageY) - relative to page (document)
  • (.clientX, .clientY) - relative to viewport.

🗣 討論

• How to prevent default handling of touch events? ⭐️