javascript touch事件

来源：互联网发布：新媒体沟通软件编辑：程序博客网时间：2024/04/30 23:10

touchstart : 當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。

touchmove : 當手指在屏幕上滑動時連續的觸發，在這個事件發生期間，商用preventDefault()可阻止滾動。

touchend : 當手指從屏幕上移開時觸發。

除了常見的DOM屬性處，觸摸事件還包含下列三個用於跟蹤觸摸的屬性：

touches : 表示當前跟蹤的觸摸操作的Touch對象的數組。

targetTouches : 特定於事件目標的Touch對象的數組。

changeTouches : 表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

每個Touch對象包含下列屬性

clientX : 觸摸目標在視口中的X座標。

clientY : 觸摸目標在視口中的Y座標。

identifier : 表示觸摸的唯一ID。

pageX : 觸摸目標在頁面中的x座標。

pageY : 觸摸目標在頁面中的y座標。

screenX : 觸摸目標在屏幕中的x座標。

screenY : 觸摸目標在屏幕中的y座標。

target : 觸摸的DOM節點座標。

下面例子：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>touch事件</title></head><body><style type="text/css">#c_card{ width:100px; height:200px; border:#F00 1px solid;}</style><section> <div id="c_card"></div>    </section><script type="text/javascript">function touchStart(event){    if(event.targetTouches.length != 1){return false;}//單點觸控    touch = event.targetTouches[0];    touObj.innerHTML = touch.pageX+'_'+touch.pageY;    }function touchMove(event){    event.preventDefault();    if(event.targetTouches.length != 1 || !move){return false;}//單點觸控    touch = event.targetTouches[0];    touObj.innerHTML = touch.pageX+'_'+touch.pageY;}function touchEnd(event){    touObj.innerHTML = 'end';}var touObj = document.getElementById("c_card");touObj.addEventListener("touchstart",touchStart,false);  touObj.addEventListener("touchmove",touchMove,false);touObj.addEventListener("touchend",touchEnd,false); </script></body></html>

0 0