創(chuàng)新互聯(lián)為您帶來網(wǎng)站開發(fā)移動端touch事件解決方案

相信對于很多手機用戶而言，當(dāng)手指不小心放在移動設(shè)備的屏幕上，不經(jīng)意間滑動會觸發(fā)的touch事件是經(jīng)常出現(xiàn)的。有很多人對這種現(xiàn)象會很反感，今天創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師則針對這個現(xiàn)象，憑借多年的經(jīng)驗，為大家詳細的講解一下這個現(xiàn)象的出現(xiàn)原因，及有效的解決辦法，幫助大家更好的了解這些問題，解決這些問題。

以下支持webkit

再比如我們常見的taret而言，

以下支持winphone 8

MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指

MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動

MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)

移動端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)

移動設(shè)備上的web網(wǎng)頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

以下是歷史原因，來源一個公司內(nèi)一個同事的分享：

2007年蘋果發(fā)布首款iphone上iOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例，可能這個簡單的舉動對于更多的使用者而言，并沒有什么只是簡單便捷了一些，但是對于網(wǎng)站開發(fā)人員，尤其是多年從事手機網(wǎng)站開發(fā)的人來說卻是一件翻天覆地的變化。

原因就出在瀏覽器需要如何判斷快速點擊上，當(dāng)用戶在屏幕上單擊某一個元素時候，例如跳轉(zhuǎn)鏈接<a href=”#”></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉(zhuǎn)，轉(zhuǎn)而進行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢？在iOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應(yīng)，給用戶慢體驗感覺，對于web開發(fā)者來說是，頁面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。

以上就是創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師為大家整理的關(guān)于移動端touch事件如何區(qū)分webkit與winponhe的相關(guān)介紹，以上都是創(chuàng)新互聯(lián)開發(fā)人員的經(jīng)驗之談，希望可以在日后的網(wǎng)站開發(fā)中可以幫助到大家，為大家的網(wǎng)站建設(shè)有所幫助。

分享名稱：創(chuàng)新互聯(lián)為您帶來網(wǎng)站開發(fā)移動端touch事件解決方案
轉(zhuǎn)載來源：http://www.muchs.cn/news26/322376.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、企業(yè)建站、電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)