。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 可...