javascript touch事件

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>

 

posted @ 2013-07-22 14:18  Vhelin  阅读(503)  评论(0)  编辑  收藏  举报