手機端的click

一:click事件的封裝

手機端的click事件不是太好用,

1.點選會有延遲,

2.會出現乙個灰色區域

就想到了用touch事件代替.

touch事件有touchstart,touchmove,touchend.

在使用的時候會有這樣的一種情況.

現在我想在乙個元素上使用touch實現單擊.

意思就是當我的手點下去,在抬起來後觸發事件.

如果我繫結touchstart肯定是不行的:手還沒抬起,就觸發了事件.

如果繫結touchend.會有一些不友好的體驗.

比如:我的手在元素上滑動,然後抬起,就會觸發這個事件.

很明顯有些時候我們只需要類似於單擊事件.這種手滑動後不需要觸發的事件.

下面這個**就是乙個移動端的click事件.

(function
()).on("touchmove",function
()).on("touchend",function
(event)
else
}obj.data("move",false
);            });
});};
})(jquery);

$("#div").touchclick(function
(self,event));

二:移動端touch事件的跨頁傳遞.

現在又a,b兩個頁面.上面各有乙個元素#a,#b.在當前頁面的同樣位置.

$("#a").on("touchend",function
());

$("#b").on("touchend",function
());

點選a之後直接跳轉到b.html.但是詭異的是.觸發了b元素的touch事件.

解決辦法.

$("#a").on("touchend",function
());

click事件有三個過程.手按下,手滑動,手抬起.

重新封裝touchclick,使其可以出發這三個事件:

(function
(),        move:
function
(self,event){},
end:
function
(self,event){}
}$.fn.touchclick1=function
(opts), defaults,opts);
this.each(function
()).on("touchmove",function
(event)).on("touchend",function
(event)
else
obj.data("move",false
);            });
});};
})(jquery);

上面的寫法有個弊端，每次想訪問當前物件的都得使用self.不太好。如果直接用this不是更好麼。改寫上面的**

(function
(),        move:
function
(self,event){},
end:
function
(self,event){}
}$.fn.touchclick=function
(opts), defaults,);
}else
, defaults,opts);
}this.each(function
()).on("touchmove",function
(event)).on("touchend",function
(event)
else
obj.data("move",false
);            });
});};
})(jquery);

移動端click事件延時

在移動端使用click事件會產生300ms的延遲問題的產生移動端存在雙擊放大的問題，所以在移動端點選事件發生時，為了判斷使用者的行為到底是要雙擊還是要點選瀏覽器通常會等待300ms，如果300ms之內，使用者沒有再次點選，則判定為點選事件，否則判定為雙擊縮放。為什麼要解決線代web對效能的...

移動端模擬click事件

移動端click事件會有300ms延遲所以用touch事件來模擬click事件，來達到點選無延遲在這裡主要使用touch事件來控制開關，來區分手指移動還是點選情況 var onoff true 手指觸控就會觸發touchstart事件,這裡不能省略，否則onoff狀態不會再次生效 div1 on...

解決移動端click點選問題

1，為什麼移動端點選會有300ms的延遲呢？從點選螢幕上的元素到觸發元素的click事件，移動瀏覽器會有大約 300 毫秒的等待時間。這是因為瀏覽器想看看你是不是要進行雙擊 double tap 操作。2，相容性 3，如何使用 script type src path to fastclick.js...

手機端的click

移動端click事件延時

移動端模擬click事件

解決移動端click點選問題

相關推薦