用过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. javascript 正则表达式补充

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  2. HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

    今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  3. Linux 上一些常用命令

    切换权限: sudo chown -R 权限名: 文件 tar -zcvf 文件夹.tar 文件夹--exclude=要过滤的文件夹路径 重启crontab :service crond restar ...

  4. VM虚拟机下安装liunx系统

    1.首先打开VMware看到如图所示,然后点击创建虚拟机,选择典型然后下一步 2.选择我稍后安装操作系统然后下一步,选择Linux系统然后下一步.给虚拟机起一个名字,和选择把虚拟机安装在那个位置.然后 ...

  5. WIN10怎么安装SQL server2000数据库

    怎样在win10下安装sql2000数据库 1.安装之前先确认自己的Windows10是64位的还是32位的 2.替换对应的系统文件SQLUNIRL.dll 此时你可能会遇到,没有权限替换文件或重命名 ...

  6. JAVA中Integer.valueOf, parsetInt() String.valueOf的区别和结果

    先来看段代码 public class IntegerDemo { public static void main(String[] args) { String num = null; System ...

  7. python基础autopep8__python代码规范

    关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:http ...

  8. BootStrapTable获取选中数据值并传参至父页面

    如何实现以下效果呢? 首先,我们先要了解一下BootStrapTable如何获取选中数据的具体值. 如下图所示,怎样选择任意一行,获取其中的数据 一.首先想要选择任意一行,就得必须先有选择框,选择框是 ...

  9. BZOJ_2599_[IOI2011]Race_点分治

    BZOJ_2599_[IOI2011]Race_点分治 Description 给一棵树,每条边有权.求一条简单路径,权值和等于K,且边的数量最小.N <= 200000, K <= 10 ...

  10. Applet 应用程序进行数字签名,对系统文件进行读写操作

    转:http://www.iteye.com/topic/154531 最近在研究applet,打算使用applet来开发一个上传文件上传控件,之前因为一直觉得applet的沙箱控制导致applet不 ...