解决MUI阻止a标签默认跳转事件_HBuilderX教程

导读：　用过mui的小伙伴们一定不会陌生，有时候真的很烦mui本身会阻止a标签默认跳转。一般只要用了mui的ui组件，比如头部，底部或者弹框，你就不...

　用过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标签默认跳转事件

最新推荐

本周排行