使用觸控檢測滑動(左,右,上或下)
觸控式滑動是指在特定方向上快速移動手指穿過觸控表面的行為。onswipe
JavaScript中目前沒有“ ”事件,這意味著我們可以使用可用的觸控事件來實現一個事件,並且只需在刷卡時定義,即“刷卡”。
讓我們首先定義何時應該將觸控表面上的移動視為滑動。有在玩兩個變數這裡-在距離旅行了使用者對x或y軸的手指touchstart
來 touchend
,而且,它花時間。基於這兩個因素,我們可以決定該操作是否符合滑動和方向。
有了這個,讓我們把想法付諸行動,看看如何檢測右鍵(從左到右)。一旦我們能夠做到這一點,檢測其他3個方向的滑動幾乎完全相同。在這個練習中,我們將規定,當用戶提出他在觸控手指表面最低為150px發生向右滑動水平
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
內touchend
,我們檢查DIST從行進 touchstart
到touchend
在指定的閾值以上的正數(即:150),因為在向右掃動,即DIST應該總是基於所使用(與陰性對左輕掃)等式是正。同時,我們確保任何垂直橫向移動都小於100px以排除對角線滑動。由於垂直運動可以在起始觸點上方或下方發生,因此我們Math.abs()
在獲得絕對垂直dist旅行時使用,因此在將其與我們的垂直閾值100進行比較時會涵蓋兩種情況。
通用滑動檢測功能
現在我們向右滑動,讓我們建立一個更通用的功能,檢測4個方向(左,右,上或下)中的任何一個方向的滑動:
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
|
swipedetect()
接受兩個引數,即將觸控事件繫結到的元素,以及在滑動發生時執行的函式。函式引數“ swipedir
”告訴您剛剛使用五個可能值進行的滑動型別:“ none ”,“ left ”,“ right ”,“ top ”或“ down ”。
下面使用該swipedetect()
功能顯示“左”,“右”,“頂部”或“向下”背景影象(覆蓋在預設背景影象的頂部),具體取決於剛剛發生的滑動:
使用的程式碼是:
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 |
|
HTML標記是:
1 2 3 4 五 |
|
我們繫結swipedetect()
到“ #touchsurface2
”,每當在其中發生有效的滑動時,我們相應地更改“ #inner
”DIV的背景影象以反映剛剛發生的滑動型別。