安卓手機的touchend事件不觸發問題

標籤：

問題描述

$(document).on("touchstart touchmove",".btn-highlight",function(event){        $(this).addClass("hover");    }).on("touchend touchcancel",".btn-highlight",function(event){        $(this).removeClass("hover");    });

起初想用這一段代碼來類比部分按鈕的高光效果（就是點擊一個按鈕之後會有個不同的樣式，類似PC的hover）

但是發現一個問題，就是在安卓手機上，下面的這個方法卻經常不觸發，非常的偶爾，著實令吾等煩惱。

 

後經查閱資料發現瀏覽器的預設事件影響了我們這個事件的觸發。那麼就涉及阻止預設事件了，很簡單，加上event.preventDefault();

最終可用代碼為

$(document).on("touchstart touchmove",".btn-highlight",function(event){        $(this).addClass("hover");        event.preventDefault();    }).on("touchend touchcancel",".btn-highlight",function(event){        $(this).removeClass("hover");    });

在css裡面對.btn-highlight加上對應的樣式就可以看到效果了，如按鈕a與按鈕b想顯示不同的效果，那麼

先給a和b都加上.btn-highlight

CSS中：

a.hover{/*第一種樣式*/}

b.hover{/*第二種樣式*/}

 

該問題續集~~~

發現這樣寫之後，如果那個按鈕是連結呢？？？跳轉不了，因為禁用預設事件了，現在把touchstart和touchmove分開寫就OK了

$(document).on("touchstart",".btn-highlight",function(){        $(this).addClass("hover");    }).on("touchmove",".btn-highlight",function(event){        event.preventDefault();    }).on("touchcancel touchend",".btn-highlight",function(event){        $(this).removeClass("hover");    });

 

安卓手機的touchend事件不觸發問題