用过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标签默认跳转事件—方法总结的更多相关文章
-
阻止a标签默认跳转事件
1:<a href="####"></a> 2:<a href="javascript:void(0)"></a> ...
-
如何阻止<;a>;标签默认行为和表单提交
阻止<a>标签默认行为 方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...
-
js阻止a标签默认事件的几种方法
方法/步骤 疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢? 方法一 要阻止a标签跳转,可以改变href ...
-
mui中a标签的跳转问题
一.脑补 快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去 ...
-
夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
-
使用nodeValue获取值与a标签默认跳转的冲突问题
今天看javascript DOM编程艺术(第2版)发现这样一个例子: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> ...
-
修改input type=file 标签默认样式的简单方法
<html><head><title></title></head><body><form id="upload ...
-
vue 阻止表单默认的提交事件
form <form autocomplete="off" @submit.prevent="onSubmit"> <input type=& ...
-
MUI框架a链接href跳转失效解决方法,解决MUI页面不会滚动的方法
//解决 所有a标签 导航不能跳转页面 mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决MUI ...
随机推荐
-
Symantec Backup Exec 2012 Agent for Linux 卸载
本文介绍一下如何卸载Symantec Backup Exec 2012 Agent for Linx.首先我们来看看Symantec_Backup_Exec2012管理员手册的文档介绍: 卸载 Age ...
-
js控制select下拉列表数据绑定
JS代码部分: <script type="text/javascript"> $(document).ready(function () { $("sel ...
-
Web安全之CSP
内容安全策略(Content-Security-Policy,简称CSP) 概念: 内容安全策略(CSP)是一种web应用技术用于帮助缓解大部分类型的内容注入攻击,包括XSS攻击和数据注入等,这些攻击 ...
-
win7下配置mysql的my.ini文件
一.环境 操作系统是win7 x64, mysql是5.6.40. 二. 怎么配置? 修改my.ini文件, 添加[client], 在下面加一行 default-character-set=utf8 ...
-
ComM(通信管理)和CanNm(network)
1 网络管理组成部分 网络管理部分由通信管理器(简称ComM),通用网络管理器接口(简称NmIf),总线相关的网络管理器(简称NM,包括CanNM,LinNM,FrNM),总线相关的状态管理 ...
-
SpringBoot之整合Redis分析和实现-基于Spring Boot2.0.2版本
背景介绍 公司最近的新项目在进行技术框架升级,基于的Spring Boot的版本是2.0.2,整合Redis数据库.网上基于2.X版本的整个Redis少之又少,中间踩了不少坑,特此把整合过程记录,以供 ...
-
Qt OpenGL 鼠标拾取实现
在之前的文章中讲到了OpenGL鼠标拾取操作的例子,工作中需要在Qt中实现,下面的程序演示了QT中opengl的拾取例子. 本例子在Qt5.12和Qt Creator4.8.0上测试,使用的是QOpe ...
- GIS中空间数据和非空间数据
-
C# 关于委托
例如: public class test:Form { //定义委托 public delegate void GetSql(string sql); //定义装载委托的属性 public GetS ...
-
2018.10.18 bzoj4105: [Thu Summer Camp 2015]平方运算(线段树)
传送门 线段树妙题. 显然平方几次就会循环(打表证明不解释). 然后所有环长度的lcmlcmlcm不大于70. 因此维护一下当前区间中的节点是否全部在环上. 不是直接暴力到叶子节点修改. 否则整体打标 ...