移動端WEB開發(fā)中click,touch,tap事件怎么使用-創(chuàng)新互聯(lián)

這篇文章主要介紹移動端WEB開發(fā)中click,touch,tap事件怎么使用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

十多年的酉陽土家族苗族網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站建設的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整酉陽土家族苗族建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“酉陽土家族苗族網(wǎng)站設計”,“酉陽土家族苗族網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

一、click 和 tap 比較

兩者都會在點擊時觸發(fā)，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點擊事件。

singleTap和doubleTap 分別代表單次點擊和雙次點擊。

二、關于tap的點透處理

在使用zepto框架的tap來移動設備瀏覽器內的點擊事件，來規(guī)避click事件的延遲響應時，有可能出現(xiàn)點透的情況，即點擊會觸發(fā)非當前層的點擊事件。

處理方式：

（1）、

github上有一個叫做fastclick的庫，它也能規(guī)避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick
將它用script標簽引入頁面（該庫支持AMD，于是你也可以按照AMD規(guī)范，用諸如require.js的模塊加載器引入），并且在dom ready時初始化在body上，如：

$(function(){
    newFastClick(document.body);
})

然后給需要“無延遲點擊”的元素綁定click事件（注意不再是綁定zepto的tap事件）即可。
當然，你也可以不在body上初始化它，而在某個dom上初始化，這樣，只有這個dom和它的子元素才能享受“無延遲”的點擊

實踐開發(fā)中發(fā)現(xiàn)，當元素綁定fastclick后，click響應速度比tap還要快一點點。哈哈

（2）、為元素綁定touchend事件，并在內部加上e.preventDefault();

$demo.on('touchend',function(e){//改變了事件名稱，tap是在body上才被觸發(fā)，而touchend是原生的事件，在dom本身上就會被捕獲觸發(fā)
    $demo.hide()
    e.preventDefault();//阻止“默認行為”
})

三、touch事件touch是針對觸屏手機上的觸摸事件?，F(xiàn)今大多數(shù)觸屏手機webkit內核提供了touch事件的監(jiān)聽，讓開發(fā)者可以獲取用戶觸摸屏幕時的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 這四個事件

touchstart,touchmove,touchend事件可以類比于mousedown，mouseover
，mouseup的觸發(fā)。

touchstart ： 當手指觸摸到屏幕會觸發(fā)；

touchmove : 當手指在屏幕上移動時，會觸發(fā)；

touchend : 當手指離開屏幕時，會觸發(fā)；

而touchcancel許多人不知道它在什么時候會被觸發(fā)而忽略它，其實當你的手指還沒有離開屏幕時，有系統(tǒng)級的操作發(fā)生時就會觸發(fā)touchcancel，例如alert和confirm彈框，又或者是android系統(tǒng)的功能彈窗。

這4個事件的觸發(fā)順序為：

touchstart -> touchmove
-> …… -> touchmove ->touchend

但是單憑監(jiān)聽上面的單個事件，不足以滿足我們去完成監(jiān)聽在觸屏手機常見的一些手勢操作，如雙擊、長按、左右滑動、縮放等手勢操作。需要組合監(jiān)聽這些事件去封裝對這類手勢動作。

其實市面上很多框架都針對手機瀏覽器封裝了這些手勢，例如jqmobile、zepto、jqtouch，不過悲劇發(fā)生了，對于某些android系統(tǒng)（我自己測試到的在android 4.0.x），touchmove和touchend事件不能被很好的觸發(fā)，舉例子說明下：

比如手指在屏幕由上向下拖動頁面時，理論上是會觸發(fā) 一個 touchstart ，很多次 touchmove
，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發(fā)一次，觸發(fā)時間和touchstart
差不多，而touchend直接沒有被觸發(fā)。這是一個非常嚴重的bug，在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暫時我只發(fā)現(xiàn)在android 4.0會有這個bug，據(jù)說 ios 3.x的版本也會有。

而顯然jqmobile、zepto等都沒有意識到這個bug對監(jiān)聽實現(xiàn)帶來的嚴重影響，所以在直接使用這些框架的event時，或多或少會出現(xiàn)兼容性問題！

以上是“移動端WEB開發(fā)中click,touch,tap事件怎么使用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：移動端WEB開發(fā)中click,touch,tap事件怎么使用-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article40/dspseo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站設計公司、響應式網(wǎng)站、商城網(wǎng)站、手機網(wǎng)站建設、品牌網(wǎng)站制作

廣告

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