您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

Fastclick 消除移动端点击延迟

时间:12-14来源:作者:点击数:
城东书院 www.cdsy.xyz

在移动端,由于点击和放大冲突的问题,所以点击会有 300ms 的延时,使用Fastclick 后,延时就消失了。

实现原理: 监听 touchend 事件,手动触发 click 事件,阻止默认的 click 事件

(function() {
  var touchStartX = 0;
  var touchStartY = 0;
  var touchEndX = 0;
  var touchEndY = 0;

  document.addEventListener('touchstart', function(event) {
    touchStartX = event.changedTouches[0].screenX;
    touchStartY = event.changedTouches[0].screenY;
  });

  document.addEventListener('touchend', function(event) {
    touchEndX = event.changedTouches[0].screenX;
    touchEndY = event.changedTouches[0].screenY;
    if (Math.abs(touchEndX - touchStartX) < 10 && Math.abs(touchEndY - touchStartY) < 10) {
      event.preventDefault();
      event.target.click();
    }
  });
})();
城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐