+
95
-

js有没有代码判断手机触摸屏上滑下滑左滑右滑事件检测?

js有没有代码判断手机触摸屏上滑下滑左滑右滑事件检测?


网友回复

+
15
-

新建EventUtil.js,文件如下:

/**
     * 用touch事件模拟点击、左滑、右滑、上拉、下拉等时间,
     * 是利用touchstart和touchend两个事件发生的位置来确定是什么操作。
     * 例如:
     * 1、touchstart和touchend两个事件的位置基本一致,也就是没发生位移,那么可以确定用户是想点击按钮等。
     * 2、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事件,计算两个事件之间的位移量
     * 1、如果位移量很小或没有位移,看做点击事件
     * 2、如果位移量较大,x大于y,可以看做平移,x>0,向右滑,反之向左滑。
     * 3、如果位移量较大,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 {
    ...

点击查看剩余70%

我知道答案,我要回答