元件化 7 手勢與動畫 實現滑鼠操作

2021-10-19 07:16:49 字數 2716 閱讀 3944

學習課程,簡要做下記錄。

})移動端,觸屏事件,touchstart和move一定觸發在同乙個元素上

所以touch事件的監聽不需要像mouse事件一樣mousedown之後才去監聽

element.addeventlistener("touchstart", event => 

}) element.addeventlistener("touchmove", event =>

})element.addeventlistener("touchend", event =>

})

touch事件和mouse事件類似,也有clientx,clienty,……等。但是touch事件有identifier。

這是因為start,move,end 事件需要乙個唯一的識別符號去追蹤觸屏事件,所以start,move,end會各有乙個識別符號,會用identifier去表示touch的惟一的id

touch 事件中start,move,end 與mouse中down, move, up 類似。但是touch事件比mouse事件多了touchcancel,cancel就是手指touch的點的序列,是以乙個異常的模式去結束的

element.addeventlistener("touchcancel", event => 

})

正常的乙個序列就是乙個start, 一堆move, 然後end, 如下圖:

但是我們如果3秒後讓它觸發乙個alert,我的觸屏就會被alert打斷(一直觸屏,直到彈出alert)

關閉alert之後,可以看到最後出現了cancel事件。滑鼠事件不會出現這種情況,永遠不會出現mousecancel這種情況。

針對mouse和touch兩套操作,可以抽象出統一的方法。

這樣就不用去針對具體的mouse還是touch事件去做處理,只需要抽象的針對每乙個點的start move end cancel去寫邏輯就可以了

let start = (point) => 

let move = (point) =>

let end = (point) =>

let cancel = (point) =>

gesture.js第一步全**如下:

//手勢

let element = document.documentelement;

element.addeventlistener("mousedown",event=>

let mouseup = event =>

element.addeventlistener("mousemove",mousemove);

element.addeventlistener("mouseup",mouseup);

})//移動端,觸屏事件,touchstart和move一定觸發在同乙個元素上

//所以touch事件的監聽不需要像mouse事件一樣mousedown之後才去監聽

element.addeventlistener("touchstart", event =>

})element.addeventlistener("touchmove", event =>

})element.addeventlistener("touchend", event =>

})//touch 事件比滑鼠事件多了touchcancel,

//cancel就是手指touch的點的序列,是以乙個異常的模式去結束的

//正常的乙個序列就是乙個start, 然後一堆move, 然後end

element.addeventlistener("touchcancel", event =>

})//這樣的一種抽象,就不用去針對具體的滑鼠還是touch事件去做處理

//只需要抽象的針對每乙個點的start move end cancel去寫邏輯就可以了

let start = (point) =>

let move = (point) =>

let end = (point) =>

let cancel = (point) =>

iOS開發 19 手勢解鎖

m檔案 import zjlockview.h define kbtncount 9 inte ce zjlockview 儲存選中按鈕 property nonatomic,strong nsmutablearray selectedbtns 記錄當前點位置 property nonatomic,...

2015 10 27 手勢優先順序

如果一張既要單擊手勢,又要雙擊手勢,要怎麼處理,看完這句 你就知道了 uitapgesturerecognizer doublerecognizer uitapgesturerecognizeralloc initwithtarget selfaction selector handledouble...

cv2手勢動態識別

本篇文章主要介紹使用cv2來實現手勢的動態識別。下面是示例 import cv2 import numpy as np capture cv2.videocapture 0 while capture.isopened ret,frame capture.read cv2.imshow frame ...