Unable to prevent a touchend event from being canceled due to the event being non-cancelable, such as when scrolling is currently ongoing and cannot be disrupted

Question

Unable to prevent a touchend event from being canceled due to the event being non-cancelable, such as when scrolling is currently ongoing and cannot be disrupted

const SlideSettings = {
  dots: false,
  arrows: false,
  infinite: false,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  draggable: true,
  // swipe: false,
  currentSlide: activeLocation,
  afterChange: (newIndex: number) => {
    setActiveLocation(newIndex);
  },
};

const SwipeSettings = {
  dots: false,
  arrows: false,
  infinite: false,
  speed: 500,
  slidesToShow: 1.5,
  slidesToScroll: 1,
  draggable: true,
  swipe:true
};

When working in NextJS, I found that I need to comment out the swipe option in order to use it. However, doing so triggers this error message:

Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Despite wanting to set swipe to true, I am unable to make it false. Is there a workaround for this issue?

javascript next.js slider

Answer 1

Answer №1

Here are some suggestions to address this issue without disabling swipe functionality:

To prevent default touch behavior (like scrolling) during a swipe, you can add an event listener that stops the default action:

useEffect(() => {
  const handleTouchMove = (event) => {
    if (event.cancelable) {
      event.preventDefault();
    }
  };

  window.addEventListener('touchmove', handleTouchMove, { passive: false });

  return () => {
    window.removeEventListener('touchmove', handleTouchMove);
  };
}, []);

Modern browsers use passive event listeners for touch events for better performance. To avoid issues with canceling events, specify passive: false when adding the listener:

document.addEventListener('touchstart', (e) => {
  if (e.cancelable) {
    e.preventDefault();
  }
}, { passive: false });

Check if a touch event can be canceled before attempting to prevent it from happening:

const handleSwipe = (e) => {
  if (e.cancelable) {
    e.preventDefault();
    // Include custom swipe handling logic
  }
};

If the default swipe feature is causing problems, consider using a different library like react-swipeable to manage swipe events more effectively:

npm install react-swipeable

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({
  onSwipedLeft: () => console.log('Swiped left'),
  onSwipedRight: () => console.log('Swiped right'),
  preventDefaultTouchmoveEvent: true,
  trackMouse: true,
});

return <div {...handlers}>Try swiping here</div>;

By implementing these solutions, you can resolve the error while maintaining swipe functionality as desired.

Answer 2

Here are some suggestions to address this issue without disabling swipe functionality:

To prevent default touch behavior (like scrolling) during a swipe, you can add an event listener that stops the default action:

useEffect(() => {
  const handleTouchMove = (event) => {
    if (event.cancelable) {
      event.preventDefault();
    }
  };

  window.addEventListener('touchmove', handleTouchMove, { passive: false });

  return () => {
    window.removeEventListener('touchmove', handleTouchMove);
  };
}, []);

Modern browsers use passive event listeners for touch events for better performance. To avoid issues with canceling events, specify passive: false when adding the listener:

document.addEventListener('touchstart', (e) => {
  if (e.cancelable) {
    e.preventDefault();
  }
}, { passive: false });

Check if a touch event can be canceled before attempting to prevent it from happening:

const handleSwipe = (e) => {
  if (e.cancelable) {
    e.preventDefault();
    // Include custom swipe handling logic
  }
};

If the default swipe feature is causing problems, consider using a different library like react-swipeable to manage swipe events more effectively:

npm install react-swipeable

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({
  onSwipedLeft: () => console.log('Swiped left'),
  onSwipedRight: () => console.log('Swiped right'),
  preventDefaultTouchmoveEvent: true,
  trackMouse: true,
});

return <div {...handlers}>Try swiping here</div>;

Unable to prevent a touchend event from being canceled due to the event being non-cancelable, such as when scrolling is currently ongoing and cannot be disrupted

Answer №1

Here are some suggestions to address this issue without disabling swipe functionality:

To prevent default touch behavior (like scrolling) during a swipe, you can add an event listener that stops the default action:

Modern browsers use passive event listeners for touch events for better performance. To avoid issues with canceling events, specify passive: false when adding the listener:

Check if a touch event can be canceled before attempting to prevent it from happening:

If the default swipe feature is causing problems, consider using a different library like react-swipeable to manage swipe events more effectively:

By implementing these solutions, you can resolve the error while maintaining swipe functionality as desired.

Similar questions

Upon generating the app with npx create-react-app <myproject> and launching it with "npm start", the following error message was displayed:

Modifying a JavaScript object causes changes to another object within the same array

What is the inner workings behind server side rendering in Next.js?

retrieve an item that lacks a definitive value

What's the best way to incorporate necessary styles into text using particular fonts?

A guide to incorporating a textview into a React application using the Google Maps API

Utilize useEffect to dynamically populate several dropdown menus with data

The communication between AJAX and PHP is not successful in transferring data

Fetch a list of 10 items at a time using AngularJS with Ionic framework's infinite scroll feature

How do you send a variable in a GET request with React?

How to access a variable using an HTML class in JavaScript?

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

Knockout Js' observable objects are not updating the UI to reflect changes in the data

Updating Bootstrap 5.3 Modal to Have a Fixed Backdrop when Opened (Using JavaScript/JQuery)

In Vue.js, easily toggle classes with a click

the display outcome appears fuzzy and lacks sharpness

What are the consequences of incorporating JavaScript in PHP code for changing locations?

How does the AngularJS Dependency Injection system determine the names of the arguments it needs to inject?

How can I create 3 conditions in an AJAX request to verify a user's ID?

How does an arrow function access parameters even when they have not been explicitly passed in?