移动端常见事件 总结

原生 touch触摸事件，是一组事件;

包括： 

1. touchstart: 当手指触摸屏幕的时候出发
2. touchmove： 当手指在屏幕移动的时候
3. touchend： 手指离开屏幕的时候触发
4. touchcancel:  当被迫中止滑动的时候触发（弹消息，来电等等）；

1. 原生js绑定事件：

window.onload = function(){
   var box = document.querySelector('.box');
   box.addEventListener('touchstart', function(e){
    console.log(' start ');
    console.log(e); //事件对象，每一个事件都有一个触摸事件对象
   })
}

2.事件对象：

名字： TouchList 触摸点的集合（一个手指就是一个触摸点）

changedTouches  改变后的触摸点集合   每个事件都会记录触摸点

targetTouches      当前元素的触摸点集合  离开屏幕时无法记录

touches                页面上所有触摸点集合  离开屏幕时无法记录

 

3. 滑动实现的原理：

1. 就是让触摸的元素随着手指的滑动做位置的改变

2.位置的改变，需要当前手指的坐标

3.在每一个触摸点中会记录当前触摸点的坐标。e.touches[0]第一个触摸点

4.

clientX clientY 基于浏览器窗口（视口）

pageX pageY 基于页面(视口)

screenX screenY 基于屏幕

 

swipe手势事件: 由原生touch事件衍生来的

同样也包括:

swipeLeft, swipeRight, swipeUp, swipeDown;

<!-- html --> 
 <div class="box" style="width: 200px; height:200px; background: pink"></div>

    window.onload = function () {
      /*给dom绑定手势事件, 绑定完成之后要执行的操作(回调函数)*/
      var box = document.querySelector('.box');
      console.log(box);

      var bindSwipeEvent = function (dom, leftCallback, rightCallback) {
        /* 首先确定事件触发的条件 */
        var startX = 0,
            distance = 0,
            isMove = false;
        dom.addEventListener('touchstart', function (e) {
          startX = e.touches[0].clientX;
          // console.log(startX);
        })
        dom.addEventListener('touchmove', function (e) {
          isMove = true;
          var moveX = e.touches[0].clientX;
          console.log(moveX);
          distance = moveX - startX;
          console.log(distance);
        })
        dom.addEventListener('touchend', function (e) {
          if (isMove && Math.abs(distance) > 50) {
            if (distance > 0)
              //条件成立,如果当前对象dom传入了leftCallback 就使用回调函数调用该方法
              leftCallback && leftCallback.call(this, e);
            else
              rightCallback && rightCallback.call(this, e);
          }
          startX = 0;
          distance = 0;
          isMove = false;
        })
      }
      /* 调用 */
      bindSwipeEvent(box, function (e) {
        console.log(this);
        console.log('右滑');
      }, function (e) {
        console.log(this);
        console.log('左滑');
      })
    }

tap事件: (轻触)响应速度快

移动端也有点击事件click, 为了区分是滑动还是点击, click相应会有300ms延迟,

如果300ms内没有进行滑动则会被认为是点击事件.

但是移动端click300ms响应太慢,会影响用户体验.

解决方案:

1. tap事件,可以通过touch相关事件封装过来.

    window.onload = function() {
      
      var bindTapEvent = function(dom, callback) {
        /* 条件 */
        //1. 不能滑动
        //2. 设定响应时间不超过150ms
        var startTime = 0;
        var isMove = false;
        dom.addEventListener('touchstart', function(e){
          startTime = Date.now();
          console.log(startTime);
        })
        dom.addEventListener('touchmove', function(e){
          isMove = true;
        })
        dom.addEventListener('touchend', function(e){
          if((Date.now() - startTime) < 150 && !isMove) 
            callback && callback.call(this, e);
        })

      }
      bindTapEvent(document.querySelector('.box'), function(e){
        console.log(this);
        console.log(e);
        console.log('this is tap event');
      })
    }

2. 通过fastclick.js插件

1. 直接下载js脚本,本地引入. 下载地址:https://www.bootcdn.cn/fastclick/
2. 在线引入
  <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>

//加载完fastclick.js脚本后

document.addEvenListener('DOMcontentLoaded', function(){
    /* 初始化方法 */
    FastClick.attach(document.body);
}, false);

/*正常使用click事件就可以了*/

上面是原生的js事件。下面说一下jQuery移动端手势事件：

jquery的触摸事件是被进行过封装的。 这里的事件对象e和原生的e不同。 下面我们来看一下，e是什么

//js
  
$('.wjs_banner').on('touchstart', function(e){
    console.log(e);
  })

这里我们可以看到原生的touch事件被封装为originalEvent, 展开如下：