移动端click延迟和tap事件

web_blog

于 2020-08-12 15:31:01 发布

阅读量334

点赞数

分类专栏： javascript 移动端

本文链接：https://blog.csdn.net/qq_43248623/article/details/107958488

版权

javascript 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

移动端

4 篇文章 0 订阅

订阅专栏

一、click等事件在移动端的延迟

click事件在移动端和pc端均可以触发，但是在移动端有延迟现象。

1、背景

由于早期移动设备浏览网页时内容较小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，以确保用户可以方便地放大网页内容，但是当用户单击按钮的时候，移动设备需要延迟约300ms执行，以判断用户是否是要双击

2、验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>click的延迟</title>
    <style type="text/css">
      html,
      body {
        height: 100%;
      }
      body {
        background-color: hotpink;
      }
    </style>
    <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
    <script>
      eruda.init();
    </script>
  </head>
  <body></body>
</html>

<script type="text/javascript">
  window.onload = function() {
    document.body.onclick = function() {
      console.log("click延迟", Date.now() - startTime);
    };

    //定义一些必须要使用的变量
    var startTime = 0;

    document.body.addEventListener("touchstart", function(e) {
      console.log(e);
      console.log("touchstart");
      //获取当前系统时间
      startTime = Date.now();
    });
    document.body.addEventListener("touchmove", function() {
      console.log("touchmove");
    });
    document.body.addEventListener("touchend", function() {
      console.log("touchend");
      //计算 差值
      console.log("时差", Date.now() - startTime);
    });
  };
</script>

移动端事件响应原则：优先响应移动端独有事件

二、解决办法

1、使用touch事件模拟click事件

如下使用touchstart和touched封装了一个移动端的tap事件

var idcast = {
        // 传入dom元素
        tap: function(dom, callback) {
          //判断是否传入了dom元素,或者dom元素是否是一个对象
          if (!dom || typeof dom != "object") {
            return;
          }
          var startX, startY, time, moveX, moveY, distanceX, distanceY;
          dom.addEventListener("touchstart", function(e) {
            if (e.targetTouches.length > 1) {
              return;
            }
            startX = e.targetTouches[0].clientX;
            startY = e.targetTouches[0].clientY;
            time = Date.now();
          });
          dom.addEventListener("touchend", function(e) {
            if (e.changedTouches.length > 1) {
              //说明不止一个手指
              return;
            }
            //判断时间差异
            if (Date.now() - time > 150) {
              console.log("长按操作");
              return;
            }
            //获取松开手指的时候的坐标与触摸开始时的坐标差异
            moveX = e.changedTouches[0].clientX;
            moveY = e.changedTouches[0].clientY;
            distanceX = moveX - startX;
            distanceY = moveY - startY;
            //判断坐标差异
            if (Math.abs(distanceX) < 6 && Math.abs(distanceY) < 6) {
              //说明是点击而非滑动
              //执行tap事件相应之后的处理操作
              //若函数不为空才调用
              callback && callback(e);
              console.log("移动端点击单击事件--tap事件");
            } else {
              console.log("滑动操作");
            }
          });
        }
      };

可以直接调用idcast中tap方法。

2、使用zepto中已经封装好的tap事件直接调用

$(menuBox).on("tap",callback)

zepto下载链接: https://github.com/madrobby/zepto

web_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端click延迟和tap事件

一、click等事件在移动端的延迟click事件在移动端和pc端均可以触发，但是在移动端有延迟现象。1、背景由于早期移动设备浏览网页时内容较小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，以确保用户可以方便地放大网页内容，但是当用户单击按钮的时候，移动设备需要延迟约300ms执行，以判断用户是否是要双击2、验证<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-
复制链接

扫一扫