"Engaging with the touchscreen inhibits the triggering of click

Question

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag.

If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt but will on the second one.

Essentially, any click event handlers do not trigger upon the first click after a swipe has occurred.

Is there a solution to resolve this issue without impacting SEO and crawlers?

I require touch-action:pan-y to prevent vertical scrolling when users swipe horizontally, but the downside is the need for two clicks post a swipe for the link to work.

Can anyone suggest a workaround that avoids causing issues with SEO?

javascript css

Answer 1

Answer №1

Do you ever wonder;
let container = document.getElementById('myContainer');
let button = document.getElementById('myButton');

let isScrolling = false;

container.addEventListener('touchevent', function(event) {
  isScrolling = false;
});

container.addEventListener('touchmove', function(event) {
  isScrolling = true;
});

container.addEventListener('touchend', function(event) {
  if (!isScrolling) {
    button.click();
  }
});

Answer 2

Do you ever wonder;
let container = document.getElementById('myContainer');
let button = document.getElementById('myButton');

let isScrolling = false;

container.addEventListener('touchevent', function(event) {
  isScrolling = false;
});

container.addEventListener('touchmove', function(event) {
  isScrolling = true;
});

container.addEventListener('touchend', function(event) {
  if (!isScrolling) {
    button.click();
  }
});

"Engaging with the touchscreen inhibits the triggering of click

Answer №1

Similar questions

Unable to access the inner object using key-value pair in Angular when working with Firebase

Passing Object Data from Child to Parent Component in React and Leveraging its Functionality

Tips for creating two lines of text within one line using CSS

Error: Unable to locate module: 'material-ui/styles/colors'

Popups generated on the fly without any triggers from links

Error: req.body or req.params.id is not defined in the current context (PUT and PATCH requests)

Issue with Nextjs environmental variables not functioning in JavaScript pages

How can Javascript or Jquery determine the specific event assigned to an object?

Sending data to a PHP page to maintain state in an Angular application

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Updating to the latest version of Next.js will result in a modification of the API path

Is it possible to utilize the returned value of a function within an if statement?

What is causing this code to run immediately upon the addition of Promise logic?

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

What's the ideal file structure for Codeigniter paired with Angularjs?

Moving the words from textArea to each 'ol' element using JavaScript

Preserving intricate nesting in a Mongoose schema

Fetch the count of files in a directory using AJAX

Run a script on an ajax requested page prior to the page being loaded

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3