移動端js觸控touch詳解(附帶案例原始碼)

2022-04-01 19:43:04 字數 1068 閱讀 7590

移動端觸控滑動原理詳解案例,實現過程通過新增dom標籤的觸控事件監聽,並計算觸控距離,通過距離座標計算觸控角度,最後通過觸控角度去判斷往哪個方向觸控的。

觸控的事件列表

觸控的4個事件:

touchstart      觸控螢幕上時觸發  

touchmove    觸控螢幕中滑動時觸發  

touchend       離開螢幕時觸發  

touchcancel    系統取消觸控事件的時候觸發

監聽觸控後觸控事件會實現乙個event物件,這個物件裡面包括3個觸控函式列表。

觸控事件裡的3個函式:

touches      螢幕上所有手指列表  

targettouches      在當前dom標籤上手指的列表

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

觸控函式的屬性,用於獲取座標

8個屬性:

clientx      觸控目標在瀏覽器中的x座標 

clienty      觸控目標在瀏覽器中的y座標

identifier      標識觸控的唯一id。 

pagex      觸控目標在當前dom中的x座標

pagey      觸控目標在當前dom中的y座標

screenx      觸控目標在螢幕中的x座標

screeny      觸控目標在螢幕中的y座標

target      觸控的dom節點目標。

math.atan2()函式,計算角度的弧度值

angel=math.atan2(y,x)  

x 指定點的 x 座標

y 指定點的 y 座標

angel是乙個弧度值(可以比喻為直角三角形對角的角,其中 x 是鄰邊邊長,而 y 是對邊邊長)

atan2(x,y)*180/math.pi   轉換為角度

觸控詳細**:

移動端JS 觸控事件基礎

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

js獲取移動端觸控座標

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

移動端 touch事件

在模擬器下不支援用on的方式來給元素加touch事件,推薦用addeventlistener方式 mouse事件的觸發必須在元素範圍內,且在移動端會有300ms左右的延遲 在移動端,觸碰乙個元素時,會立即執行新增在元素上的touch事件,然後記錄座標,300ms之後在這個座標點查詢元素,如果找到元素...