js 觸控的Event 獲取觸控位置

2022-02-22 08:30:25 字數 1113 閱讀 9642

。touch有3個事件:touchstart,touchmove,touchend,移動端不能用click,這涉及到click的300ms的延遲問題。但是又沒有原生的tap,所以zepto的touch庫一直被用。。還有左滑,右滑螢幕,都是不錯的。

<

div

id="drag"

>

div>

*#drag
接下來是它的event事件,只截了touch列表的部分:

每個事件都有的touches---touch列表,儲存著觸控點的資訊。

targettouches---位於當前dom元素上手指的列表。 所以都用event.targettouches.length判斷螢幕上手指個數。

changedtouches---涉及當前事件手指的列表。

而每個列表呢,都包含identifier---乙個數值,唯一標識觸控會話(touch session)中的當前手指。一般為從0開始的流水號

target---該觸發事件的元素

接下來就是我們的位置重頭戲了:同樣我點選的中間最上的位置。按理說應該是

clientx/y:跟pc一樣,據此頁面的距離,相當於pc的滑鼠座標。這裡是觸控點。相對於視口

screenx/y:相對於螢幕的觸控點的位置。也是跟pc的同名屬性一樣。

pagex/y:跟clientx/y相似。相對於頁面。按理說有滾動條的情況下,pagex是大於clientx的,但是chrome上面都是一樣的,chrome pc版的沒有問題。

還有radiusx/radiusy/rotationangle:畫出大約相當於手指形狀的橢圓形,分別為橢圓形的兩個半徑和旋轉角度。

不經常用支援性也不好。

js獲取移動端觸控座標

想在touchmove事件裡監聽手指按下的座標,event.pagex獲取的是undefined,changedtouches,targettouches,touches也只獲得到了滑鼠按下時的座標,沒法持續監聽,求幫助!或者其他辦法也行,效果大概是乙個元素,手指在上面滑動,然後改變這個元素的top...

js 觸控事件

var jc 0 document.addeventlistener touchstart function event false document.addeventlistener touchmove function event false document.addeventlistener ...

關於JS的觸控方法

js的touch事件,一般用於移動端的觸屏滑動 function function touch event touchstart 當手指觸控螢幕時觸發 即使已經有乙個手指放在了螢幕上也會觸發。touchmove 當手指在螢幕上滑動時連續的觸發。在這個事件發生期間,呼叫preventdefault 可...