解决MUI阻止a标签默认跳转事件—方法总结

Posted tu-0718

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决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‘
  });
});

 

  小伙伴们可以根据情况选择使用哪一种方法解决

  



以上是关于解决MUI阻止a标签默认跳转事件—方法总结的主要内容,如果未能解决你的问题,请参考以下文章

为啥阻止a标签的默认事件

JavaScript 之 阻止 a 标签的默认跳转行为的三种方法

如何禁用a标签,是禁用事件,而不是啥阻止跳转之类的

mui中a标签的跳转问题

使用mui框架后a标签无法跳转

[oldboy-django][1初识django]阻止默认事件发生 + ajax + 模态编辑对话框