zoukankan      html  css  js  c++  java
  • 解决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'
      });
    });

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

      

  • 相关阅读:
    (2)链表有哪几种分类——4
    (1)有哪几种表的实现方式——4
    链表基本操作
    多窗口
    UI线程和work线程
    模板
    (二)tensorflow-gpu2.0之自动导数
    (一)tensorflow-gpu2.0学习笔记之开篇(cpu和gpu计算速度比较)
    高阶函数及map、reduce、filter、lambda、sorted等函数的应用
    迭代器
  • 原文地址:https://www.cnblogs.com/tu-0718/p/8760621.html
Copyright © 2011-2022 走看看