关于click、tap、touch、swiper类事件的区别

click 来自于点击事件 用于移动端会有200到300毫秒的延时

用于移动端需要引入 fastclick.js来解决延迟问题

$(function(){
    newFastClick(document.body);
})

事件对象及兼容

事件对象：e=e||window.event;
事件冒泡： e.stopPropagation()||e.cancelBubble=true
事件源：e.target||e.srcElement
阻止默认事件：e.preventDefault()||e.returnValue=false; 
鼠标位置：
if(e.pageX){         
        xPos=evt.pageX;         
        yPos=evt.pageY;     
    } else {    
        //ie6到8不兼容     
        xPos=e.clientX+（document.documentElement.scrollLeft||document.body.scrollLeft）;
        yPos=e.clientY+（document.documentElement.scrollTop||document.body.scrollTop）;     
    }

---

touch 类事件属于原生移动端事件 jq里边没有此事件

常用的方法有ontouchstart、ontouchmove、ontouchend

touchstart ： 当手指触摸到屏幕会触发；
touchmove : 当手指在屏幕上移动时，会触发；
touchend : 当手指离开屏幕时，会触发；
touchcancel，是在拖动中断时候触发。

Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。

事件对象及兼容

    touches：表示当前跟踪的触摸操作的touch对象的数组。
　  targetTouches：特定于事件目标的Touch对象的数组。
　  changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性：

　　clientX：触摸目标在视口中的x坐标。
　　clientY：触摸目标在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：触摸目标在页面中的x坐标。
　　pageY：触摸目标在页面中的y坐标。
　　screenX：触摸目标在屏幕中的x坐标。
　　screenY：触摸目标在屏幕中的y坐标。
　　target：触摸的DOM节点目标。

事件对象详细展示

关于touch的滑动事件

    ele.addEventListener('touchstart', start, false);
    ele.addEventListener('touchmove', move, false);
    ele.addEventListener('touchend', end, false);
    function start(e){
        this.startX = e.touches[0].pageX
        this.startY = e.touches[0].pageY;
    }
    function move(e){
        this.moveEndX = e.changedTouches[0].pageX;
        this.moveEndY = e.changedTouches[0].pageY;
        this.X = this.moveEndX - this.startX;
        this.Y = this.moveEndY - this.startY;
        if (Math.abs(this.X) > Math.abs(this.Y)&&Math.abs(this.X)>30&& this.X > 0) {
            //向右滑
            console.log('right');
        }else if (Math.abs(this.X) > Math.abs(this.Y)&&Math.abs(this.X)>30&& this.X < 0) {
            //向左滑
            console.log('left');
        }
    }
    function end(e){
        ele.removeEventListener('touchmove', start, false);
        ele.removeEventListener('touchend', move, false);
    }

---

tap事件属于第三方事件，需要引入zepto.js

常用的方法有tap，singleTap,doubleTap ,longTap分别代表点击、单次点击、双次点击、长按。

bug:tap点透事件。
原因：tap事件是通过监听绑定document上的touch事件来模拟的，并且tap事件是冒泡到document上才触发的。
解决：为元素绑定touchend事件，并在内部加上e.preventDefault();

swipe滑动事件属于第三方事件，需要引入zepto.js

swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)