html5手機觸控螢幕touch事件的詳細介紹

HTML5中新添加了很多事件，但是由於他們的兼容問題不是很理想，應用實戰性不是太強，所以在這裡基本省略，咱們只分享應用廣泛兼容不錯的事件，日後隨著兼容情況提升以後再陸續添加分享。

今天為大家介紹的事件主要是觸摸事件：

touchstart：觸摸開始的時候觸發
touchmove：手指在螢幕上滑動的時候觸發
touchend：觸摸結束的時候觸發

而每個觸控事件都包含了三個觸控列表，每個列表包含了對應的一系列觸控點（用來實現多點觸控）：

touches：目前位於螢幕上的所有手指的清單。
targetTouches：位於目前DOM元素上手指的清單。
changedTouches：涉及目前事件手指的清單。

每個觸控點由包含如下觸控資訊（常用）：

identifier：一個數值，唯一標識觸控會話（touch session）中的目前手指。一般為從0開始的流水號（android4.1，uc）
target：DOM元素，是動作所針對的目標。
pageX/pageX/clientX/clientY/screenX/screenY：一個數值，動作在螢幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以螢幕為基準）。　
radiusX/radiusY/rotationAngle：畫出大約相當於手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉角度。初步測試瀏覽器不支援，好在功能不常用，歡迎大家回饋。

 程式碼如下:

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);

以上是html5手機觸控螢幕touch事件的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！