[HTML5]移动端前端常见的触摸相关事件touch、tab、swipe等

1. click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟,于是，对于触屏的交互式网站，触摸事件是相当重要的。

2. touch类事件

(1)触摸事件，有touchstart, touchmove ,touchend, touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

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

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

(2)每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

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

　　clientX：触摸目标在视口中的x坐标。(client不包含滚动距离)
　　clientY：触摸目标在视口中的y坐标。

　　identifier：标识触摸的唯一ID。(唯一标识触摸会话中的当前手指。一般为从0开始的流水号)

　　pageX：触摸目标在页面中的x坐标。(page包含滚动距离)
　　pageY：触摸目标在页面中的y坐标。

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

　　target：触目的DOM节点目标。(是动作所针对的目标。)

(4)在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：

　　(1)touchstart
　　(2)mouseover
　　(3)mousemove(一次)
　　(4)mousedown
　　(5)mouseup
　　(6)click
　　(7)touchend

列：

function load (){  
 
    //屏幕分辨率
    var scheight= window.screen.height;
    var scwidth = window.screen.width ;
    
    //屏幕可用工作区高度
    var scavheight= window.screen.availHeight ;
    var scavwidth = window.screen.availWidth ;
    
    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("qqq");  
 
        switch(event.type){  
            case "touchstart":  
                oInp.innerHTML = "Touch started (" + event.touches[0].screenX + "," + event.touches[0].screenY + ") =====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "
Touch end (" + event.changedTouches[0].screenX + "," + event.changedTouches[0].screenY + ")=====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "
Touch moved (" + event.touches[0].screenX + "," + event.touches[0].screenY + ")=====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";  
                break;  
        }  
          
    }  
}  
window.addEventListener('load',load, false);