首页/html5前端开发/HTML5触摸事件(touchstart、touchmove和touchend)

HTML5触摸事件(touchstart、touchmove和touchend)

发布-网页培训班 | 浏览量-

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

 
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
 
touchend事件:当手指从屏幕上离开的时候触发。
 
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
 
touches:表示当前跟踪的触摸操作的touch对象的数组。
 
targetTouches:特定于事件目标的Touch对象的数组。
 
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
 
 
每个Touch对象包含的属性如下。
 
 
clientX:触摸目标在视口中的x坐标。
 
clientY:触摸目标在视口中的y坐标。
 
identifier:标识触摸的唯一ID。
 
pageX:触摸目标在页面中的x坐标。
 
pageY:触摸目标在页面中的y坐标。
 
screenX:触摸目标在屏幕中的x坐标。
 
screenY:触摸目标在屏幕中的y坐标。
 
target:触目的DOM节点目标。
 
function load (){  
   
    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;  
        }  
           
    }  
}  
window.addEventListener('load',load, false);

原文地址:http://www.35ui.cn/post/20160821374.html

标签HTML5触摸事件

上一条: 经常玩电脑怎么防辐射
下一条: 用CSS3 绘制你需要的几何图形

或许你还对下面的文章感兴趣