"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

What is the best way to implement conditional styling in Vue.js?

Update a table in Laravel view using AJAX with a table join operation

What are the steps for sorting objects in an array by their data type attribute?

Transmitting C# data to a JavaScript script through JSON serialization. Issue encountered: Character invalid

Elements within the DIV tag are not displaying in a linear arrangement as intended

Error in JavaFX: CSS Parser anticipating COLON

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

Variable revised is not accessible beyond the function

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

An unexpected page transition occurs when attempting to delete a link

Identifying Changes in ReactJS Pages

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

Embarking on the journey of transitioning code from server-side to client-side

Node.js tutorial: Building routes with regex and implementing redirects

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Align the center of a grid div that does not contain any items

Passing a MySQL connection to scripts in Express

Open the HTML document and access the file contents

What is the best way to extract the image url from a page in WordPress?

Utilizing CSS3 to perform multiple 3D rotations