Wie zu verhindern Scroll, aber nicht Link folgt beim Brennen Touchstart Ereignis über <a> Tag in reinem JS?

Question

Ich weiß nicht, ob das überhaupt möglich ist, aber ich versuche Touchstart über ein <a> Tag zu erkennen. Bei Berührung sollte die Rolle verhindert werden, aber wenn der Finger losgelassen wird, ohne sich zu bewegen, sollte das Verbindungsverhalten beim Öffnen eines neuen Fensters erhalten bleiben. Ich habe festgestellt, dass Sie keine e.preventDefault() (Timeout) verzögern können, da es nicht funktionieren wird, obwohl kein Fehler ausgegeben wird.

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>

Wie ich das tun könnte?

Answer 1

Dies sollte für Sie arbeiten. Ich habe touchmove, touchend and touchstart verwendet. isTouchMove ist eine boolesche Variable, die erkennt, ob der Benutzer mit einem Touch-Gerät gescrollt hat.

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