如何防止滚动，但不链接跟随时，触发touchstart事件超过<a>标签

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

本文关键字：标签 事件 触发 滚动 何防止 链接 跟随 touchstart      更新时间：2023-09-26

我不知道这是否可能，但我试图在<a>标签上检测touchstart。当触摸时，滚动应该被阻止，但如果手指被释放而不移动，打开新窗口的链接行为应该保持不变。我已经意识到，你不能延迟(超时)一个e.preventDefault()，因为它不会工作，尽管没有抛出一个错误。

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>

我怎么能那样做呢?

这应该适合您。我用的是touchmove, touchend and touchstart。isTouchMove是一个布尔变量，用于检测用户是否使用触摸设备滚动。

// 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>

相关文章：