How to prevent scroll but not link following when firing touchstart event over tag in pure JS?

Question

I don't know if this is even possible but I'm trying to detect touchstart over an <a> tag. When touched, the scroll should be prevented but if the finger is released without moving, the link behaviour of opening a new window should remain. I've realised that you cannot delay (timeout) an e.preventDefault(), as it won't work despite not throwing an error.

var a = document.querySelector('a');
a.addEventListener("touchstart", handle_touchstart);
function handle_touchstart(e){
  e.preventDefault();
  //do other stuff
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
<a href="http://nestordominguez.com" target="_blank">Click here</a>
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>

How could I do that?

probably you shouldn't do that... that would be trying to change a common behavior of browsers and messing with scrolling always annoys people. if you really want to do it, here is a table showing which browsers allow to prevent scrolling: http://quirksmode.org/mobile/default.html ... apply it to `touchstart` as well as `touchmove`. you also need to register `touchend` and check the difference of the two points in order to see if the finger is still on the same position. — Simon Hänisch, Jun 29 '16 at 14:23
@SimonHänisch when you are moving an element around the screen you cannot allow scrolling... — Vandervals, Jun 29 '16 at 14:25
You are right... then if I got you right, you need to use the `touchend` event. If I remember it correctly, you can get time between `touchstart` and `touchend` by subtracting their timestamps and you get a position for each event. — Simon Hänisch, Jun 29 '16 at 14:29

Philip · Answer 1 · 2016-07-11T10:53:46.617

This should work for you. I have used touchmove, touchend and touchstart. isTouchMove is a boolean var to detect if the user scrolled with a touch device.

// if user with a touch device is scrolling this is set to true
var isTouchMove = false;

// selectors
var body = document.querySelector('body');
var a = document.querySelector('a');

// set "isTouchMove" to true when you are scrolling
body.addEventListener("touchmove", function() {
  isTouchMove = true;
});

// fire event on touch and set "isMoveTouch" to false
a.addEventListener("touchstart", function() {
  isTouchMove = false;
});

// fire event when you leave the link
a.addEventListener("touchend", function() {
  if(isTouchMove) return;

  // your stuff
});

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis unde, natus iusto, laborum dignissimos praesentium nam animi, ipsa inventore eius nihil! Sit nam voluptate eveniet sunt a tempore iure quibusdam!</p>
<p>Ratione inventore earum, non eveniet omnis incidunt dicta debitis, ipsum suscipit quas tenetur amet provident officiis labore, veritatis commodi consequatur! Ea dolorum, quis rerum minus quasi consequuntur eius odio reiciendis.</p>
<br>
<a href="http://nestordominguez.com" target="_blank">Click here</a>
<br>
<p>Laboriosam dicta officiis amet fuga! Atque officia, cupiditate recusandae vitae laboriosam dolorem tenetur minus. Perspiciatis nesciunt tenetur deserunt placeat similique ipsa reprehenderit! Esse ducimus laboriosam nulla, autem quibusdam corporis totam.</p>
<p>Aliquam dignissimos ex non magnam, rerum odio voluptates ducimus aspernatur. Dolorem quas, molestias dicta recusandae dolorum earum adipisci modi nemo alias accusantium eaque. At eos, dolorum et culpa quaerat recusandae!</p>
<p>Veniam tempora numquam aliquam perferendis, dolor voluptatem at, eligendi explicabo sunt minima nam debitis possimus nemo esse doloribus itaque consectetur odio rerum dolorum quasi facere saepe quidem. Laborum, cum, asperiores?</p>
<p>Magni, delectus. Illo sed blanditiis quae pariatur amet ratione quis perspiciatis error veritatis non laborum quibusdam ea, suscipit sequi esse velit doloribus ducimus ex ipsum modi aliquid tenetur. Reiciendis, eaque?</p>

How to prevent scroll but not link following when firing touchstart event over tag in pure JS?

1 Answers1