手機端html5觸屏事件(touch事件)3
阿新 • • 發佈：2019-01-26
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);
轉載自：http://blog.sina.com.cn/s/blog_51048da70101f0ex.html