解決MUI阻止a標籤默認跳轉事件—方法總結

　　用過mui的小夥伴們必定不會陌生，有時候真的很煩mui自己會阻止a標籤默認跳轉。通常只要用了mui的ui組件，好比頭部，底部或者彈框，你就不能在用a標籤進行跳轉了。

　　注：項目中引用了mui後，可能也會遇到，html代碼中未引用mui的組件代碼段，但依然會致使a標籤默認跳轉失效的問題（mui通常用於移動端）

 

　　在實際項目使用中，我總結了如下幾種方法：

　　①：直接使用js或jq獲取要點擊的元素，並綁定相應的點擊事件，而後在用window.location.href進行跳轉，以下代碼：

$(function(){
    $("#index").on('tap', function() {
        window.location.href = '../index/index.html';
    });
    $("#classify").on('tap', function() {
        window.location.href = '../product/classify.html';
    });
    $("#vip").on('tap', function() {
        window.location.href = '../vip/vipCenter.html';
    });
    $("#shoppingCart").on('tap', function() {
        window.location.href = '../shopcart/shoppingcar.html';
    });
    $("#personal").on('tap', function() {
        window.location.href = '../personalCenter/index.html';
    });
});

 

　　②：直接註釋mui中，阻止a標籤默認跳轉的源碼部分 （不到萬不得已，通常不推薦直接修改或者註釋源碼）

 

　　③：當你想讓某個頁面的a標籤跳轉不受mui影響，但又不想使用上面2種方法時，能夠在當前頁面添加以下代碼，親測好用

mui(document).on('tap', 'a', function() {
    var a = document.createElement('a');
    a = this.cloneNode(true);
    a.click();
})

　　cloneNode(true)屬性介紹:  http://www.w3school.com.cn/jsref/met_node_clonenode.asp

　　④：其實mui官方也提供了相應的解決方法，官方連接 http://dev.dcloud.net.cn/mui/window/#openwindow，代碼以下： 

//tap爲mui封裝的單擊事件，解決移動端click事件點擊延遲300毫秒的問題
document.getElementById('info').addEventListener('tap', function() {
  //打開關於頁面
  mui.openWindow({
    url: 'examples/info.html', 
    id:'info'
  });
});

 

　　小夥伴們能夠根據狀況選擇使用哪種方法解決