04 觸屏事件

2021-10-03 08:19:32 字數 1040 閱讀 7665

touchstart: 手指觸控螢幕時觸發

touchmove: 手指在螢幕上移動時觸發

touchend: 手指離開螢幕時觸發

touches: 位於螢幕上的所有手指的列表

targettouches: 位於該元素上的所有手指的列表

changedtouches:touchstart時包含剛與觸控螢幕接觸的觸點,touchend時包含離開觸控螢幕的觸點

clientx/y        手指相對於layout viewport的水平/垂直畫素距離

pagex/y         手指相對於layout viewport的水平/垂直畫素距離(含滾動)

screenx/y       手指相對於layout viewport的水平/垂直畫素距離(含滾動)

(未設定viewport時,screenx/y在webview中不正確)

target               手指最初與螢幕接觸時的元素

移動開發通常會設定,這時這三對座標值是完全一樣的。

早期移動裝置瀏覽器網頁時內容非常小,為了增強使用者體驗,蘋果公司專門為移動裝置設計了雙擊放大的功能,確保使用者可以非常方便的放大網頁內容,但是當使用者單擊乙個按鈕時,移動裝置會延時(約300ms)執行,判斷用單是否要雙擊。用觸屏事件可以解決這個問題

1、tap檢測接觸和離開螢幕的距離來實現

2、drag跟蹤手指移動位置,進而設定元素定位座標

3、swipe 判斷手指滑動的方向

zeptojs為我們封裝了常的觸屏事件,需要touch模組支援,預設沒有構建此模,我們可以自定義構建。

1、安裝nodejs環境

3、解壓縮

4、cmd命令列進入解壓縮後的目錄

5、執行npm install 命令

6、編輯make檔案,新增自定義模組並儲存,如下圖

7、然後執行命令 npm run-script dist

8、檢視目錄dist即構建好的zepto.js

android game 觸屏事件處理

如圖 按螢幕飛機會發出子彈 img 用手指觸控一下螢幕,這短暫的0.1秒內大概會產生10個左右的motionevent 並且系統會盡可能快的把這些event發給監聽執行緒,這樣的話在這一段時間內cpu就會忙於處理ontouchevent從而畫面一卡一卡的。我用的辦法是在ontouchevent中sl...

移動端觸屏事件

移動端瀏覽器相容性較好,我們不需要考慮以前 js 的相容性問題,可以放心的使用原生 js 書寫效果,但是移動端也有自己獨特的地方。比如觸屏事件 touch 也稱觸控事件 android和 ios 都有。touch 物件代表乙個觸控點。觸控點可能是一根手指,也可能是一根觸控筆。觸屏事件可響應使用者手指...

觸屏的觸發事件

事件可以執行,但是在安卓 我的是4.2 版本,同事的是winphone8 手機上面這個事件卻都不執行 我們團隊在最後還是選擇click事件執行,雖然它執行很慢,所以我蒐羅了一下觸控手機的觸控事件及手勢事件,以下為 資料,先儲備下來吧,當然,手勢事件我還沒有使用過,下面的 是從 上查詢的資料,觸控事件...