当前位置：网站首页>Tap and longtap encapsulation of touch events -- from Ono

Tap and longtap encapsulation of touch events -- from Ono

2022-06-11 09:42:00 【Happy every day!】

mdn Address ：

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

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

click 300ms Delay

Wait for a second click , Double click behavior ,

PC Upper dbclick It also fails at the mobile end

touchstart touchmove touchend touchcancel

touchcancel When did it happen ？ Touch during sliding , A message pops up , Or telephone access , At this time, there will be message processing that covers the current page , If we operate on messages, etc , It will trigger touchcancel

TouchEvent

type：touchstart,touchmove,touchend,touchcancel

touchstart At the time of the target Namely touchmove,touchend At the time of the incident target

touches：TouchList： Save contacts

changedTouches:TouchList, Contacts related to the current document

targetTouches：TouchList, At present target Contacts on

TouchList There is Touch object

fastclick.js

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

swiper

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

Package and use

<!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 {
      /* according to iPhone5 The width of   Set to 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
      },
      //  single click 
      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>

And the following article is about fastclick The explanations were also very detailed , Attach a link

fastclick Solve the mobile end click Event delay 300ms And click through problems _ Program can't ape's blog -CSDN Blog _fastclick

原网站

版权声明
本文为[Happy every day!]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206110916239457.html

当前位置：网站首页>Tap and longtap encapsulation of touch events -- from Ono

Tap and longtap encapsulation of touch events -- from Ono

边栏推荐

猜你喜欢

随机推荐