安卓手機的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");
    });