原生js實現移動端點擊、長按、左滑、右滑、上滑、下滑等事件模擬

時間 2019-11-08

原文原文鏈接

github地址：https://github.com/xubaodian/...
爲何要模擬這些事件？

一、上述這些事件中，瀏覽器直接支持的事件只有點擊，而其它事件使用頻率也很高。
javascript

二、移動端web原生點擊事件會有300ms的延遲，由於用戶肯能雙擊，爲了判斷用戶是單擊仍是雙擊，因此會有這個延遲，這個延遲會衍生不少問題，例如點擊穿透。因此咱們能夠不用原生的點擊事件，而使用模擬點擊事件。
html

如何模擬這些事件呢？

咱們能夠總結這些操做，都是手指先觸摸屏幕，而後在離開。不一樣點在於滑動事件手指有位移，而點擊事件手指沒有位移。

首先想到的就是全部瀏覽器都是支持touchstart、touchmove和touchend事件的，咱們能夠利用這些事件來模擬上述事件。
java

原理以下：

一、監聽dom的touchstart和touchend事件。

二、分別記錄touchstart、touchend事件的位置和時間，計算位移delta（包括x和y）和時間間隔timegap。

三、根據delta和timegap的值，判斷屬於哪一種事件。有兩種狀況：
git

delta中x和y都很小

這是點擊操做，用戶點擊按鈕等時，理論上是不會有位移的，可是實際中也可能發生一個很小的位移，畢竟手指不是精密儀器。

若是時間間隔timegap較小，則屬於點擊，若是timegap較大，屬於長按操做。
github

delta中的x或y比較大

這種狀況下，就是手指發生滑動操做了，至因而左右滑動，仍是上下滑動，根據x和y的大小來判斷。

|x| > |y|（|x|表明x的絕對值），左右滑動，x>0,右滑，反之左滑。

|x| <= |y|，上下滑動，y>0,下滑，反之上滑。
web

這樣就模擬了移動端web中的這幾個事件了。代碼以下：瀏覽器

/**
     * 用touch事件模擬點擊、左滑、右滑、上拉、下拉等時間，
     * 是利用touchstart和touchend兩個事件發生的位置來肯定是什麼操做。
     * 例如：
     * 一、touchstart和touchend兩個事件的位置基本一致，也就是沒發生位移，那麼能夠肯定用戶是想點擊按鈕等。
     * 二、touchend在touchstart正左側，說明用戶是向左滑動的。
     * 利用上面的原理，能夠模擬移動端的各種事件。
    **/
   const EventUtil = (function() {

    //支持事件列表
    let eventArr = ['eventswipeleft', 'eventswiperight', 'eventslideup', 'eventslidedown', 'eventclick', 'eventlongpress'];

    //touchstart事件，delta記錄開始觸摸位置
    function touchStart(event) {
      this.delta = {};
      this.delta.x = event.touches[0].pageX;
      this.delta.y = event.touches[0].pageY;
      this.delta.time = new Date().getTime();
    }

    /**
     * touchend事件，計算兩個事件之間的位移量
     * 一、若是位移量很小或沒有位移，看作點擊事件
     * 二、若是位移量較大，x大於y，能夠看作平移，x>0,向右滑，反之向左滑。
     * 三、若是位移量較大，x小於y，看作上下移動，y>0,向下滑，反之向上滑
     * 這樣就模擬的移動端幾個常見的時間。
     * */
    function touchEnd(event) {
      let delta = this.delta;
      delete this.delta;
      let timegap = new Date().getTime() - delta.time;
      delta.x -= event.changedTouches[0].pageX;
      delta.y -= event.changedTouches[0].pageY;  
      if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) {
        if (timegap < 1000) {
          if (this['eventclick']) {
            this['eventclick'].map(function(fn){
              fn(event);
            });
          }
        } else {
          if (this['eventlongpress']) {
            this['eventlongpress'].map(function(fn){
              fn(event);
            });
          }
        }
        return;
      }
      if (Math.abs(delta.x) > Math.abs(delta.y)) {
        if (delta.x > 0) {
          if (this['eventswipeleft']) {
            this['eventswipeleft'].map(function(fn){
              fn(event);
            });
          }
        } else {
          this['eventswiperight'].map(function(fn){
            fn(event);
          });
        }
      } else {
        if (delta.y > 0) {
          if (this['eventslidedown']) {
            this['eventslidedown'].map(function(fn){
              fn(event);
            });
          }
        } else {
          this['eventslideup'].map(function(fn){
            fn(event);
          });
        }
      }
    }

    function bindEvent(dom, type, callback) {
      if (!dom) {
        console.error('dom is null or undefined');
      }
      let flag  = eventArr.some(key => dom[key]);
      if (!flag) {
        dom.addEventListener('touchstart', touchStart);
        dom.addEventListener('touchend', touchEnd);
      }
      if (!dom['event' + type]) {
        dom['event' + type] = [];
      }
      dom['event' + type].push(callback);
    }

    function removeEvent(dom, type, callback) {
      if (dom['event' + type]) {
        for(let i = 0; i < dom['event' + type].length; i++) {
          if (dom['event' + type][i] === callback) {
            dom['event' + type].splice(i, 1);
            i--;
          }
        }
        if (dom['event' + type] && dom['event' + type].length === 0) {
          delete dom['event' + type];
          let flag  = eventArr.every(key => !dom[key]);
          if (flag) {
            dom.removeEventListener('touchstart', touchStart);
            dom.removeEventListener('touchend', touchEnd);
          }
        }
      }
    }
    return {
      bindEvent,
      removeEvent
    }
   })();

在閉包中定義了幾個事件處理操做，EventUtil有兩個方法，bindEvent綁定事件，removeEvent是移除事件綁定。

支持六個事件：

swipeleft是左滑事件，swiperight是右滑事件，slideup是上滑事件，slidedown下滑事件，click點擊事件，longpress長按點擊事件。
閉包

使用案例以下：

在頁面中引用上述代碼：dom

<script src="./EventUtil.js"></script>

測試代碼以下,代碼中有註釋，能夠看到如何應用這些模擬事件：移動端web

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #main{
      width: 100%;
      height: 300px;
      background: blue;
      color: white;
      font-size: 20px;
      text-align: center;
    }
  </style>
  <!--引入事件-->
  <script src="./EventUtil.js"></script>
</head>
<body style="font-size: 14px;">
  <div id="main"></div>
  <button id="test">接觸左滑綁定</button>
   <script>
     //獲取dom
     let domContent = document.querySelector('#main');

     //定義各種事件，爲了能夠解除事件綁定，事件回調不使用匿名函數
     function handleClick() {
       alert('點擊事件');
     }
     function handleLeft() {
       alert('左滑事件');
     }
     function handleRight() {
       alert('右滑事件');
     }
     function handleUp() {
       alert('下滑事件');
     }
     function handleDown() {
       alert('上滑事件');
     }
     function handleLong() {
       alert('長按事件');
     }
     //綁定點擊事件
     EventUtil.bindEvent(domContent, 'click', handleClick);
     //綁定兩次左滑事件
     EventUtil.bindEvent(domContent, 'swipeleft', handleLeft);
     EventUtil.bindEvent(domContent, 'swipeleft', handleLeft);
     //綁定右滑事件
     EventUtil.bindEvent(domContent, 'swiperight', handleRight);
     //上滑事件
     EventUtil.bindEvent(domContent, 'slideup', handleUp);
     //下滑事件
     EventUtil.bindEvent(domContent, 'slidedown', handleDown);
     //長按點擊事件
     EventUtil.bindEvent(domContent, 'longpress', handleLong);

     //接觸綁定按鈕
     let btnTest = document.querySelector('#test');
     function removeLeft() {
       //接觸左滑事件綁定
       EventUtil.removeEvent(domContent, 'swipeleft', handleLeft);
     }
     //綁定點擊事件
     EventUtil.bindEvent(btnTest, 'click', removeLeft);
   </script>
</body>
</html>

測試效果以下:
有疑問的能夠留言或發送郵件至472784995@qq.com。