用过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. js文件引用的问题顺带复习css引用

    js文件包含在<script>块中用scr引用,css在link和@import来引用,css不是本篇的重点,直接引用一个博主的总结: “ 区别1:link是XHTML标签,除了加载CSS ...

  2. TestNG 自动化测试入门教程--典型示例

    TestNG介绍 TestNG是Java中的一个测试框架, 类似于JUnit 和NUnit,   功能都差不多, 只是功能更加强大,使用也更方便 Java中已经有一个JUnit的测试框架了.  Tes ...

  3. Linux 6.8 TFS(Taobao File System)使用文档-安装篇

    介绍  TFS(Taobao FileSystem)是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件系统,其设计目标是支持海量的非结构化数据的存储:TFS使用C++语言开发,需要运行在64b ...

  4. 用Java为Hyperledger Fabric(超级账本)开发区块链智能合约链代码之部署与运行示例代码

    部署并运行 Java 链代码示例 您已经定义并启动了本地区块链网络,而且已构建 Java shim 客户端 JAR 并安装到本地 Maven 存储库中,现在已准备好在之前下载的 Hyperledger ...

  5. 第一天 Java语言概述

    一.什么是软件 软件就是按照特定的顺序把数据和指令组合在一起,能够完成相应功能的程序. 软件分为两种: 系统软件:专门用户运行其他程序的平台.比如Linux.Windows.MAC等 应用软件:完成相 ...

  6. bzoj4904 [Ctsc2017]最长上升子序列

    我们发现他让求的东西很奇怪,于是通过某D开头定理,我们转化为前m位的序列用k个不上升子序列最多能覆盖多少.数据范围小的时候可以网络流做,但是这道题显然不支持网络流的复杂度.然后有一个奇怪的东西叫杨氏矩 ...

  7. 安装VMware错误,Microsoft Runtime DLL 安装程序未能完成安装

    安装VMware-workstation-full-12.5.6-5528349, 出现如下错误: 这时候,要注意了,不要点击"确认",如果手快点击了,没关系再次运行VMware安 ...

  8. Keepalived + nginx实现高可用性和负载均衡

    在前面的一篇中讲到了Heartbeat作为高可用服务架构的解决方案,今天有试验了一种全新的解决方案,即采用Keepalived来实现这个功能. Keepalived 是一种高性能的服务器高可用或热备解 ...

  9. centos-7 yum装docker-ce后启动失败

    相关版本: centos-7:   CentOS Linux release 7.0.1406 (Core) docker-ce: Docker version 18.03.0-ce, build 0 ...

  10. Postman----基础使用篇(没有接口文档的情况下如何着手做接口测试)

    [备注说明]内文中的图片由于页面的限制,图片显示不清晰,为了能更加的看清图片,请点击"图片",点击"右键"选择"在新标签页中打开图片",可查 ...