H5:移动端触屏事件 touch

1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。调用preventDefault()事件可以阻止滚动。

3. touchend事件：当手指从屏幕上离开的时候触发。

4. touchcancel事件：触摸结束的时候触发

   每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
   touches：当前位于屏幕上的所有手指的列表。
   targetTouches：位于当前DOM元素上手指的列表。
   changedTouches：涉及当前事件手指的列表。

每个Touch对象包含的属性如下。 

• clientX：触摸目标在视口中的x坐标。

• clientY：触摸目标在视口中的y坐标。

• identifier：标识触摸的唯一ID。

• pageX：触摸目标在页面中的x坐标。

• pageY：触摸目标在页面中的y坐标。

• screenX：触摸目标在屏幕中的x坐标。

• screenY：触摸目标在屏幕中的y坐标。

• target：触摸的DOM节点目标。

• 
  

document.addEventListener('touchstart',touch,false);
document.addEventListener('touchmove',touch,false);
document.addEventListener('touchend',touch,false);     
function touch (event){
    var event = event || window.event;
    var oInp = document.getElementById("inp");
    switch(event.type){
        case "touchstart":
            oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
            break;
        case "touchend":
            oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
            break;
        case "touchmove":
            event.preventDefault();
            oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
            break;
    }

}

事件(包括鼠标事件)发生的顺序如下： 

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

获取更多的文章，欢迎关注微信公众号