js原生實(shí)現(xiàn)FastClick事件的實(shí)例
注明：本人學(xué)習(xí)javascript時(shí)間不長(zhǎng)，最近一直在做web端的手機(jī)網(wǎng)頁(yè)和微信應(yīng)用，由于最近有用到類似fastclick的功能，在原來(lái)的程序中用touchstart和touchend事件模擬，現(xiàn)在嘗試將其封裝，得到了以下兩種有問(wèn)題的方案。分享給大家，另求大神指導(dǎo)
在手機(jī)端Web app開(kāi)發(fā)中，click事件的300ms的延遲，會(huì)造成響應(yīng)緩慢，尤其在低端機(jī)中尤為明顯。而使用touchstart或者touchend事件，會(huì)和默認(rèn)的滾輪事件發(fā)生沖突，這也不是我們所期望的。
所以，自己動(dòng)手，豐衣足食，寫了一個(gè)快速點(diǎn)擊事件的原生js代碼(考慮到web app開(kāi)發(fā)的環(huán)境，我們暫時(shí)無(wú)需考慮對(duì)IE等瀏覽器的兼容)。
實(shí)現(xiàn)方法1如下：
function FastClickEvent(handler){
var fastclick = {
handler : handler,
bind : function(query){
var targetList = document.querySelectorAll(query);
for(var i=0,len=targetList.length;i<len;i++)
{
targetList[i].addEventListener('touchstart',handleEvent);
targetList[i].addEventListener('touchend',handleEvent);
}
},
unbind : function(query){
var targetList = document.querySelectorAll(query);
for(var i=0,len=targetList.length;i<len;i++)
{
targetList[i].removeEventListener('touchstart',handleEvent);
targetList[i].removeEventListener('touchend',handleEvent);
}
}
}
var touchX = 0 ,touchY = 0;
function handleEvent(event){
switch(event.type)
{
case 'touchstart':
touchX = event.touches[0].clientX;
touchY = event.touches[0].clientY;
break;
case 'touchend':
var x = event.changedTouches[0].clientX;
var y = event.changedTouches[0].clientY;
if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5)
fastclick.handler(event);
break;
}
};
return fastclick;
};
原理：根據(jù)連續(xù)touchstart和touchend事件發(fā)生時(shí)位置的變化，來(lái)判斷是否是一次點(diǎn)擊
調(diào)用：用一個(gè)handler函數(shù)來(lái)注冊(cè)一個(gè)FastClickEvent事件。然后將注冊(cè)好的FastClickEvent事件,通過(guò)bind方法，綁定到對(duì)應(yīng)的元素上去。如下：
var handler = function(event){
console.log(event.target.id+" fastclicked");
}
var fastClick = new FastClickEvent(handler);
fastClick.bind("div");
這段代碼，我們給所有的div元素注冊(cè)了fastclick的handler事件。調(diào)用fastClick.unbind來(lái)解除元素的綁定。
但是這段代碼有一個(gè)問(wèn)題，為了讓handleEvent事件能夠訪問(wèn)到touchX，touchY。我采用了閉包的手法，這意味著每次new一個(gè)FastClickEvent事件對(duì)象，都要在內(nèi)存中再次注入重復(fù)的handleEvent函數(shù)。至于重復(fù)的touchX，touchY，更是不必多說(shuō)了。
新手求助：原本是想把handleEvent函數(shù)寫到原型里，但是產(chǎn)生的一個(gè)問(wèn)題是handleEvent(event)的this對(duì)象是windows，也就是說(shuō)，我取不到touchX和touchY以及handler對(duì)象，造成訪問(wèn)錯(cuò)誤。
有一種比較簡(jiǎn)單的解決思路，就是只注冊(cè)一個(gè)fastClickEvent事件，然后在處理程序中根據(jù)event.target的實(shí)際值(即發(fā)生事件的對(duì)象上)來(lái)決定響應(yīng)的內(nèi)容。
但是，這意味著你必須對(duì)所有的fastclick事件都非常熟悉。
用這種方法帶來(lái)的好處在于，由于你只有一個(gè)handleEvent函數(shù)，所以基本來(lái)說(shuō)，在頁(yè)面釋放之前，除非是你不想再觸發(fā)fastclick事件，否則無(wú)需去解綁任何元素的fastclick事件(即使你解綁了，內(nèi)存中仍然存在該handler函數(shù))。而且，你可以很方便的用bind(query)來(lái)添加任何動(dòng)態(tài)生成的元素的fastclick事件，只要你在handler函數(shù)中已經(jīng)寫好相應(yīng)的處理程序。
如果你想添加多個(gè)fastclick事件，而且可能要在多個(gè)地方注冊(cè)，那么也只要new一個(gè)新的FastClickEvent對(duì)象，然后綁定到對(duì)應(yīng)的元素中去就可以了。
下面，介紹一種使用EventTarget類的方法。首先看一下EventTarget
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type]=[];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length;i<len;i++){
handlers[i](event);
}
}
},
removeHandler : function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i=0,len=handler.length;i<len;i++){
if(handlers[i]==handler){
break;
}
}
handlers.splice(i,1);
}
}
}
這個(gè)類，是一個(gè)用來(lái)添加、移除以及實(shí)現(xiàn)自定義類的接口。參考《JavaScript高級(jí)程序設(shè)計(jì)第三版》P616-617
那么，如何把這個(gè)類，變成我們的fastclick事件接口呢？
定義一個(gè)全局變量，用這個(gè)變量來(lái)完成所有的fastclick事件注冊(cè)、刪除以及添加
var FastClick = function(){
var fastclick = new EventTarget(),
touchX = 0 ,
touchY = 0;
function handleEvent(event){
switch(event.type)
{
case 'touchstart':
touchX = event.touches[0].clientX;
touchY = event.touches[0].clientY;
break;
case 'touchend':
var x = event.changedTouches[0].clientX;
var y = event.changedTouches[0].clientY;
if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5)
fastclick.fire({type:'fastclick',target:event.target});
break;
}
};
fastclick.bind = function(query)
{
var targetList = document.querySelectorAll(query);
for(var i=0,len=targetList.length;i<len;i++)
{
targetList[i].addEventListener('touchstart',handleEvent);
targetList[i].addEventListener('touchend',handleEvent);
}
}
Fastclick.unbind = function(query){
var targetList = document.querySelectorAll(query);
for(var i=0,len=targetList.length;i<len;i++)
{
targetList[i].removeEventListener('touchstart',handleEvent);
targetList[i].removeEventListener('touchend',handleEvent);
}
}
return fastclick;
}();
這個(gè)全局變量FastClick可以用來(lái)添加任意的fastclick事件。
下面來(lái)講講如何調(diào)用。
添加事件函數(shù)：
FastClick.addHandler('fastclick',function(event){});
刪除事件函數(shù)：//匿名事件無(wú)法刪除
FastClick.removeHandler('fastclick',handler);
綁定元素
FastClick.bind("div");
解綁
FastClick.unbind("div");
用這個(gè)方法，同樣需要我們?cè)趆andler事件中對(duì)event.target做預(yù)判，因?yàn)殡m然這種方法可以添加多個(gè)fastclick事件，但是，事件在執(zhí)行的過(guò)程中是按順序一個(gè)一個(gè)執(zhí)行的，也就是說(shuō)，可能會(huì)執(zhí)行你并不想執(zhí)行的函數(shù)。
帶來(lái)的好處在于，可以注冊(cè)多個(gè)fastclick事件，而且無(wú)需再次綁定，就可以執(zhí)行了。
比如說(shuō)，
FastClick.bind("div");
FastClick.addHandler(handler1);
FastClick.addHandler(handler2);
那么，當(dāng)快速點(diǎn)擊事件發(fā)生在任一div元素時(shí)，就會(huì)順序執(zhí)行handler1和handler2。
如果我們調(diào)用removeHandler來(lái)刪除handler1或handler2，那么相應(yīng)的函數(shù)就不會(huì)再執(zhí)行了。
另外，需要注意的是，在handler函數(shù)中，this對(duì)象是FastClick.handlers['fastclick']這個(gè)數(shù)組，一般情況下，我們用event.target來(lái)獲取發(fā)生事件的對(duì)象。
用這種方法，基本克服了上面方法的問(wèn)題，而且，對(duì)這個(gè)對(duì)象重復(fù)new并沒(méi)有多大的意義，除非你不想對(duì)event.target做預(yù)判，從而生成一大堆的FaskClick類，但這顯然是不高效的。
新手求助：如何能夠?qū)崿F(xiàn)特定的元素的綁定執(zhí)行的函數(shù)，也就是： 能夠調(diào)用FastClick.bind(query,handler);實(shí)現(xiàn)對(duì)符合query條件的元素添加handler的fastclick事件。
以上就是小編為大家?guī)?lái)的js原生實(shí)現(xiàn)FastClick事件的實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~
- vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
- vue.js 添加 fastclick的支持方法
- JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- JS中touchstart事件與click事件沖突的解決方法
- 詳解vue.js的事件處理器v-on:click
- AngularJS的ng-click傳參的方法
- 詳解angularJS動(dòng)態(tài)生成的頁(yè)面中ng-click無(wú)效解決辦法
- Angularjs為ng-click事件傳遞參數(shù)
- JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例
- JS實(shí)現(xiàn)頁(yè)面中所有img對(duì)象添加onclick事件及新窗口查看圖片的方法
- 快速解決js開(kāi)發(fā)下拉框中blur與click沖突
- Javascript中綁定click事件的四種方式介紹
相關(guān)文章
本文從列表、字符串和數(shù)字三個(gè)方面詳細(xì)闡述了Python中要求每行輸出5個(gè)的相關(guān)內(nèi)容，并給出了相應(yīng)的代碼示例，在實(shí)際開(kāi)發(fā)中，我們可以根據(jù)具體的需求靈活運(yùn)用這些方法，以提高程序的輸出效率和可讀性,需要的朋友可以參考下2020-05-05
微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解
在小程序的開(kāi)發(fā)中，可能起點(diǎn)就是用戶的登錄與注冊(cè)了。和粉絲的互動(dòng)過(guò)程中發(fā)現(xiàn)，對(duì)于用戶的登錄注冊(cè)還是沒(méi)有徹底掌握。我們本篇就來(lái)分析一下登錄與注冊(cè)如何實(shí)現(xiàn)2022-08-08
ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息 bootstrap美化頁(yè)面!
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息，利用bootstrap美化頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義地址組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript下利用fso判斷文件是否存在的代碼，需要的朋友可以參考下，這個(gè)一般需要運(yùn)行確認(rèn)的。2010-12-12
這篇文章主要介紹了JSONP原理及應(yīng)用實(shí)例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
JS+CSS實(shí)現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼,可實(shí)現(xiàn)滑塊彈性振動(dòng)效果的導(dǎo)航效果,涉及jQuery數(shù)學(xué)運(yùn)算及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09
下面小編就為大家?guī)?lái)一篇JS常用字符串方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JS實(shí)現(xiàn)帶鼠標(biāo)效果的頭像及文章列表代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶鼠標(biāo)效果的頭像及文章列表代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)切換頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)...2007-08-08