用过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标签默认跳转事件—方法总结的更多相关文章

  1. 阻止a标签默认跳转事件

    1:<a href="####"></a> 2:<a href="javascript:void(0)"></a> ...

  2. 如何阻止<a>标签默认行为和表单提交

    阻止<a>标签默认行为 方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...

  3. js阻止a标签默认事件的几种方法

    方法/步骤    疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢?  方法一 要阻止a标签跳转,可以改变href ...

  4. mui中a标签的跳转问题

    一.脑补 快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去 ...

  5. 夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 使用nodeValue获取值与a标签默认跳转的冲突问题

    今天看javascript DOM编程艺术(第2版)发现这样一个例子: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> ...

  7. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  8. vue 阻止表单默认的提交事件

    form <form autocomplete="off" @submit.prevent="onSubmit"> <input type=& ...

  9. MUI框架a链接href跳转失效解决方法,解决MUI页面不会滚动的方法

    //解决 所有a标签 导航不能跳转页面 mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决MUI ...

随机推荐

  1. bind在onlick中的作用!

    1:onClick={this.toRenderRight.bind(this,item.get('id'))}; 2:onClick={this.toRenderRight.(item.get('i ...

  2. Git常用命令解说

    http://blog.csdn.net/hangyuanbiyesheng/article/details/6731629 1. Git概念  1.1. Git库中由三部分组成         Gi ...

  3. Sublime Text 3 Build 3065 License key 注册码 秘钥

    -– BEGIN LICENSE -– Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC99798F ...

  4. Java 学习笔记 (六) Java 定义变量

    这个问题来自于head first一书page68. package com.idea.study; public class Books { //headfirst page68 String ti ...

  5. bzoj 3505 [Cqoi2014]数三角形 组合

    ans=所有的三点排列-共行的-共列的-斜着一条线的 斜着的枚举每个点和原点的gcd,反过来也可以,还能左右,上下挪 #include<cstdio> #include<cstrin ...

  6. 【Unity游戏开发】AssetBundle杂记--AssetBundle的二三事

    一.简介 马三在公司大部分时间做的都是游戏业务逻辑和编辑器工具等相关工作,因此对Unity AssetBundle这块的知识点并不是很熟悉,自己也是有打算想了解并熟悉一下AssetBundle,掌握一 ...

  7. 浅谈surging服务引擎中的rabbitmq组件和容器化部署

    1.前言 上个星期完成了surging 的0.9.0.1 更新工作,此版本通过nuget下载引擎组件,下载后,无需通过代码build集成,引擎会通过Sidecar模式自动扫描装配异构组件来构建服务引擎 ...

  8. 大数据技术之_19_Spark学习_03_Spark SQL 应用解析 + Spark SQL 概述、解析 、数据源、实战 + 执行 Spark SQL 查询 + JDBC/ODBC 服务器

    第1章 Spark SQL 概述1.1 什么是 Spark SQL1.2 RDD vs DataFrames vs DataSet1.2.1 RDD1.2.2 DataFrame1.2.3 DataS ...

  9. 了解Scala反射

    本篇文章主要让大家理解什么是Scala的反射, 以及反射的分类, 反射的一些术语概念和一些简单的反射例子. 什么是反射 我们知道, Scala是基于JVM的语言, Scala编译器会将Scala代码编 ...

  10. 菜鸟如何反转到资深Web安全工程师

    90后理工男,计算机专业,毕业于985院校,从事Web安全工作,两年多的时间里先后跳槽3家公司,跳槽理由主要有以下几点:加班多.薪资低.工作内容枯燥,不想安于现状,寄希望于通过跳槽找到一个“钱多.活少 ...