[英]How to prevent scroll but not link following when firing touchstart event over <a> tag in pure JS?
我不知道这是否可能,但我试图在<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
是一个布尔值var,用于检测用户是否使用触摸设备滚动。
// 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.