Prevent the TOUCHMOVE event from being triggered when the finger is no longer touching the element but is still pressed down

Question

Prevent the TOUCHMOVE event from being triggered when the finger is no longer touching the element but is still pressed down

I have a parent div with 4 child elements inside. I want to trigger the touchmove event when I touch one of the span elements and move my finger. However, if I move my finger outside of the current span element while still pressing, I want the event to stop.

I've attempted to achieve this by checking if I'm touching a span element or another element, but so far it hasn't been successful. Once I press and move my finger, I can't seem to stop the event until I release my finger.

document.querySelector("#parent").addEventListener('touchmove', (e) => {
    console.log(`pressed ${e.target.getAttribute('data-dir')}`)
});

<div id="parent">
   <span data-dir="3">↑</span>
   <span data-dir="0">→</span>
   <span data-dir="1">↓</span>
   <span data-dir="2">←</span>
</div>

javascript events controls touch-event touchmove

Answer 1

Answer №1

To determine if your finger is inside or outside of the <span>, you can utilize the document.elementFromPoint() API.
If the finger moves outside of the <span>, you can use removeEventListener to stop the event listener during touch interactions.

Here's an example implementation:

const $el = document.querySelector("#parent")
$el.addEventListener('touchstart', function startHandler(e) {
  $el.addEventListener('touchmove', function moveHandler(e) {
      if (document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY).tagName !== 'SPAN') {
        $el.removeEventListener('touchmove', moveHandler)
      }) else {
        // carry out necessary actions
      }
  });
  $el.addEventListener('touchend', function endHandler(e){
    $el.removeEventListener('touchstart', startHandler)
    $el.removeEventListener('touchmove', moveHandler)
    $el.removeEventListener('touchend', endHandler)
  })
})

Answer 2

To determine if your finger is inside or outside of the <span>, you can utilize the document.elementFromPoint() API.
If the finger moves outside of the <span>, you can use removeEventListener to stop the event listener during touch interactions.

Here's an example implementation:

const $el = document.querySelector("#parent")
$el.addEventListener('touchstart', function startHandler(e) {
  $el.addEventListener('touchmove', function moveHandler(e) {
      if (document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY).tagName !== 'SPAN') {
        $el.removeEventListener('touchmove', moveHandler)
      }) else {
        // carry out necessary actions
      }
  });
  $el.addEventListener('touchend', function endHandler(e){
    $el.removeEventListener('touchstart', startHandler)
    $el.removeEventListener('touchmove', moveHandler)
    $el.removeEventListener('touchend', endHandler)
  })
})

Prevent the TOUCHMOVE event from being triggered when the finger is no longer touching the element but is still pressed down

Answer №1

Similar questions

Are you familiar with the Pagination and Card Components offered by Ant Design (antd)?

Effects of jQuery Show / Hide on adjacent select box operations

Retrieve the processed data from a file using node.js

Ensuring the presence of an attribute within an AngularJS Directive

Is it possible for an AngularJS directive to compile a fresh element that has a second directive assigned to it?

How to toggle between two background colors in a webpage with the click of a button using JavaScript

What is the best way to substitute unpredictable dynamic variables on-the-fly?

Encountering a 404 error when attempting to make an Axios post request

Headers permitted for CORS blocking

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

Typescript restricts dynamic property access within objects

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

Using Vue Axios to load a Laravel view can be a seamless process that

Guide to configuring environment variables with Script [Node.js]

Migration unsuccessful due to incompatible peer dependencies detected - Updating Angular to Version 12 was not successful

Operating PhantomJS in server mode

AngularJS - Retrieving an object with a button click

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

Continue iterating only when all promises have been resolved

Microphone Malfunction: Abrupt End of Input Detected