移动端常用事件

touchstart 与 click

touchstart : 触摸开始事件，当手指接触屏幕上的一刹那，触发该事件。
click: PC端点击事件，在移动端也可以使用，不过会有200ms延迟，一般不建议使用。

	var box = document.getElementById("touchstart");
    box.addEventListener("touchstart", function (e) {
        //e.preventDefault()      //阻止鼠标事件触发
       console.log('touchstart'); 
    });
     box.addEventListener("click", function (e) {
       console.log('click'); 
    });

看到控制台，touchstart先执行，而click要等一小段时间才执行(肉眼可见)；
如果不想让click触发，阻止默认事件就可：e.preventDefault()

touchmove

手指在某区域持续滑动，会触发该事件

box.addEventListener("touchmove", function (e){
        //do something
})

使用该事件时切记要做好函数节流，毕竟移动端性能有限，函数防抖与节流详见我上篇文章 函数防抖与节流

touchend

某区域内触摸事件结束的一刹那触发该事件，或称手指抬起的一瞬间。

// touchend触摸结束
    box.addEventListener("touchend", function (e){
        console.log('touchend事件');
    })

touchEvent

TouchEvent是一个对象，在做移动端业务或功能需求的时候，经常会用到。可以试着打印一下，看它里面有些什么

box.addEventListener('touchstart', function(e) {
    console.dir(e); // 查看TouchEvent对象的属性和方法
});

打印结果

重点讲一下这三个常用的
changedTouches：一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。做移动端滑动事件会用到。

targetTouches：一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。

touches：一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。多指操作，获取多个触点会用到