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 — 当元素被划过时触发。(可选择给定的方向)
