移動端觸控事件touchmove的坑

一說到移動端觸控事件，大家的反應不就是touchstart，touchmove，touchend嗎，相當於pc段的mousedown，mousemove，mouseup，只要是寫過pc端的js的話，若不慎，往往會坑在移動端。

比如說最近我就被touchmove坑了好久好久不能自拔。我的意圖是在觸控的時候獲取觸控的位置座標。當初我是這麼寫的：

var xy=document.getelementbyid("xy");

var endxy=document.getelementbyid("end_xy");
var content=document.getelementbyid("content");
var x,y,end_x,end_y;
document.addeventlistener("touchstart",function(evt),false)
document.addeventlistener("touchmove",function(evt),false)
document.addeventlistener("touchend",function(evt)else
},false)

通過仔細研究發現這裡面有兩個坑：

其一是要想獲取觸控的屬性（座標），首先要獲取觸控的物件，移動端不像pc端只有乙個指標，所以要先取乙個手指的情況下e.touches[0];

其二是觸控時瀏覽器有個預設的事件，這個事件會阻斷你的所有操作。所以在操作之前要先把預設事件除掉evt.preventdefault();否則怪異現象層出不窮。

其三是一定要用addeventlistener事件繫結，不可用ontouchmove,ontouchstart,ontouchend。

所以正確的觸控事件是這樣子的：

var xy=document.getelementbyid("xy");

var endxy=document.getelementbyid("end_xy");
var content=document.getelementbyid("content");
var x,y,end_x,end_y;
document.addeventlistener("touchstart",function(evt),false)
document.addeventlistener("touchmove",function(evt),false)
document.addeventlistener("touchend",function(evt)else
},false)

移動端的觸控事件

首先 touch 包含三類事件，它們分別是 touchstart touchmove touchend touch 屬性 1.touch.identifier 此 touch 物件的唯一識別符號。一次觸控動作 我們指的是手指的觸控 在平面上移動的整個過程中，該識別符號不變。可以根據它來判斷跟蹤的是否...

移動端的常用觸控事件

1 touches 表示當前跟蹤的觸控操作的 touch 物件的陣列。2 targettouches 特定於事件目標的 touch 物件的陣列。3 changetouches 表示自上次觸控以來發生了什麼改變的 touch 物件的陣列。每個 touch 物件包含的屬性 4 clientx 觸控目標在...

移動端JS 觸控事件基礎

一 手機上的觸控事件 基本事件 touchstart 手指剛接觸螢幕時觸發 touchmove 手指在螢幕上移動時觸發 touchend 手指從螢幕上移開時觸發 下面這個比較少用 touchcancel 觸控過程被系統取消時觸發 每個事件都有以下列表，比如touchend的targettouches...