Touch事件的tap,longtap封装--来自小野

最新推荐文章于 2022-10-13 16:54:39 发布

开心每一天！

最新推荐文章于 2022-10-13 16:54:39 发布

阅读量271

点赞数

分类专栏：基础知识文章标签： javascript webview 开发语言

本文链接：https://blog.csdn.net/sdaulee/article/details/125164484

版权

基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

mdn地址：

https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

click 300ms延迟

等待是否有第二次点击，也就是双击行为，

PC上的dbclick在移动端也失效了

touchstart touchmove touchend touchcancel

touchcancel发生在什么时候？触摸滑动的过程中，有消息弹出，或者电话接入等情况时，这时会有覆盖在当前页面的消息处理，如果我们去操作消息等，就会触发touchcancel

TouchEvent

type：touchstart,touchmove,touchend,touchcancel

touchstart时的target就是touchmove，touchend事件发生时的target

touches：TouchList：保存触点

changedTouches:TouchList，与当前文档相关的触点

targetTouches：TouchList，作用在当前target上的触点

TouchList中有Touch对象

fastclick.js

https://github.com/ftlabs/fastclick/blob/main/lib/fastclick.js

swiper

https://www.swiper.com.cn/demo/index.html

封装及使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <style>
    html {
      /*按照iPhone5的宽 设置成100px */
      font-size: 26.66667vw;
    }

    #box {
      width: 1rem;
      height: 1rem;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    const Touch = function (selector) {
      return Touch.prototype.init(selector)
    }
    Touch.prototype = {
      init: function (selector) {
        if (typeof selector === 'string') {
          this.elem = document.querySelector(selector)
        }
        return this
      },
      // 单击
      tap: function (callBack) {
        this.elem.addEventListener('touchstart', fn)
        this.elem.addEventListener('touchend', fn)
        let sTime;
        let eTime;

        function fn(e) {
          e.preventDefault()
          switch (e.type) {
            case 'touchstart':
              sTime = +new Date()
              break;
            case 'touchend':
              eTime = +new Date()
              if (eTime - sTime < 500) {
                callBack.call(this, e)
              }
            default:
              break;
          }
        }
      },
      longtap: function (callBack) {
        this.elem.addEventListener('touchstart', fn, false)
        this.elem.addEventListener('touchmove', fn, false)
        this.elem.addEventListener('touchend', fn, false)

        let t = null;
        let _self = this
        function fn(e) {
          e.preventDefault()
          switch (e.type) {
            case 'touchstart':
              t = setTimeout(() => {
                callBack.call(_self, e)
              }, 300);
              break;
            case 'touchmove':
              clearTimeout(t)
              t = null;
              break
            case 'touchend':
              clearTimeout(t)
              t = null;
              break
            default:
              break;
          }
        }

      }
    }

    window.$ = window.Touch = Touch
    $('#box').tap(function (e) {
      console.log(1)
      console.log(e.target)
    })
    $('#box').longtap(function (e) {
      console.log(2)
      console.log(e)
    })
  </script>
</body>

</html>

还有下面这篇文章对于fastclick的讲解也很详细，附上链接

fastclick 解决移动端click事件延迟300ms和点击穿透问题_程序不了猿的博客-CSDN博客_fastclick