解決MUI阻止a標簽默認跳轉事件—方法總結
阿新 • • 發佈:2018-11-29
點擊 獲取 vip 好用 style document www. pca 直接
用過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‘ }); });
小夥伴們可以根據情況選擇使用哪一種方法解決
解決MUI阻止a標簽默認跳轉事件—方法總結