HTML5的触摸事件(2)-木庄网络博客

JavaScript代码

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);

HTML代码

1	`<p` `id="inp"></p>`

　　上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到p标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到p标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。

　　这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：

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

　　介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网

以上就是HTML5的触摸事件的详细内容，更多文章请关注木庄网络博客！

返回前面的内容