Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Differentiate touchstart + touchend vs. click

With vanilla JS, and no touch framework, what condition makes a touchstart + touchend become a click event?

Is there an official specification like, for example:

touchstart followed by touchend, with delta_time < 100 ms    => triggers a "click" event

?

If so, is the standard followed by Chrome and Firefox?

Example: if you do a touchstart, then you keep the finger pressed for 2 seconds and then release the finger (touchend), it won’t trigger a click.

document.querySelector("div").addEventListener("touchstart", evt => { console.log("touchstart"); }, {passive: true});
document.querySelector("div").addEventListener("touchend", evt => { console.log("touchend"); }, {passive: true});
document.querySelector("div").addEventListener("click", evt => { console.log("click"); }, {passive: true});
<div>Hello<br>Hello<br>Hello</div>
Tags:

3

Answers


  1. 0

    Here is the documentation. A click event is registered after the touchstart followed by touchend are finished. There is no time limit for the click. Here is the structure: touchstart followed by touchend => triggers a "click" event.

    Login or Signup to reply.
  2. 0

    In the realm of JavaScript, the interaction between touchstart + touchend and click events is not as straightforward as it may seem. There isn’t an official specification that defines a click event as a touchstart followed by a touchend within a certain timeframe, like delta_time < 100 ms, for instance.

    The relationship between these events is largely dependent on the browser’s interpretation and device’s capabilities. Generally, touch events are designed for touch-capable devices, while click events are for mouse-driven interactions. On devices that support both touch and mouse, like many modern smartphones and tablets, the browser usually fires both the touch events (touchstart, touchend) and the click event when the user touches the screen.

    However, the sequence of these events isn’t always consistent across different browsers. Typically, the order is touchstart -> touchend -> click. But the click event might not always fire, especially if the touch events are cancelled or if the touch movement before touchend is significant (which might be interpreted as a swipe or drag, for example).

    In your example, if you touchstart, keep the finger pressed for 2 seconds, and then release (touchend), it might not trigger a click event. This behavior can be browser-dependent and also depends on the specific implementation of touch event handlers in your code.

    The code you provided adds event listeners for touchstart, touchend, and click events on a div element. When the user interacts with the div, the appropriate event handlers will log a message to the console. However, this code doesn’t prevent or control the firing of click events after touch events, so the exact behavior might vary depending on the browser and device.

    In summary, there isn’t a universal standard for when a touchstart + touchend sequence should trigger a click event, and the behavior can vary depending on various factors. Both Chrome and Firefox follow their own specific implementations for handling these events.

    Login or Signup to reply.
  3. 0

    There is no real delta time that you can know about, as this might change from input device to input device and from system to system. In accessibility some people with slower motor skills might have to turn up that delta so their interaction counts as a click. You can see this mentioned in the MDN docs in the Usage Notes and the specification refers to (a term I have never encoutered before but you learn something every day): hysteresis.

    In the spec it says that as long as they fall within the same hysteresis it should be considered a click, but the interval between the two events is determined by the system and as far as I know, not revealed through the browser. I presume this is to prevent fingerprinting browsers, although I do think it would be useful if you want to be able to simulate click events yourself (which the specification actually discourages in my quick reading).

    Since most people don’t switch pointer devices on the fly, perhaps the best way to see what pointer event was likely used is to just match it with CSS: window.matchMedia('(pointer:coarse)').matches should tell you whether it was a touch or a mouse event?

    document.addEventListener( 'click', event => {
  
  event.preventDefault();
  
  if( window.matchMedia( 'pointer:coarse' ).matches ){
      
    console.log( 'Probably a touch event click' );
    
  } else {
  
    console.log( 'Probably a mouse event click' );
    
  }
  
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search