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

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

以下支持webkit

再比如我們常見(jiàn)的taret而言，

以下支持winphone 8

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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