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>

 

你可能感兴趣的:(JavaScript)