解决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'
});
});
小伙伴们可以根据情况选择使用哪一种方法解决
解决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 ...
随机推荐
- 巩固java(二)----JVM堆内存结构及垃圾回收机制
前言: 我们在运行程序时,有时会碰到内存溢出(OutOfMemoryError)的问题,为了解决这种问题,我们有必要了解JVM的内存结构和垃圾回收机制. 正文: 1.JVM堆内存结构 ...
- ubuntu16.04开机循环输入密码无法进入桌面的解决办法
前些天碰到一个头疼的问题,启动我的ubuntu之后,输入密码闪屏一下,又需要输入密码!!!于是再输还要再输!!!!! 经过百度一翻后终于找到原因和解决办法. 原来是我之前在profile文件里配置了一 ...
- Python爬取谷歌街景图片
最近有个需求是要爬取街景图片,国内厂商百度高德和腾讯地图都没有开放接口,查询资料得知谷歌地图开放街景api 谷歌捷径申请key地址:https://developers.google.com/maps ...
- gitlab pipelines job执行时日志较大报错
问题描述 gitlab pipelines job执行时日志较大报错 Job's log exceeded limit of 4194304 bytes. 解决方案 出现该问题主要是因为gitlab ...
- react VS vue 我们究竟该如何选择(从项目的角度帮你分析)
一.序言 现在web开发最火的两个框架,react和vue.听起来就感觉很牛逼的样子.确实,不得不服,创造出这2种框架的人真的是牛逼.不过更牛逼的是为这2中框架不断完善的人.一个优秀的idea,会在很 ...
- Postman----Newman的使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...
- MYSQL———正则表达式查询!
在使用select查询的过程中,有时会用到正则表达式对结果进行查询,将学习到的内容进行总结! 一 语法结构如下: 二 常用匹配方式进行示例说明 首先创建表student,表的结构如下: 1·^:查询s ...
- Hive 查询元数据库获取某个分区的count数
=========查询分区的大小========= select d.NAME,t.TBL_NAME,p.PART_NAME,prm.PARAM_KEY,prm.PARAM_VALUE from TB ...
- 微服务架构 - SpringCloud整合分布式服务跟踪zipkin
1.zipkin zipkin是Twitter的一个开源项目,它基于Google Dapper实现.我们可以使用它来收集各个服务器上请求链路的跟踪数据,并通过它提供的REST API接口来辅助我们查询 ...
- Python的垃圾回收机制(引用计数+标记清除+分代回收)
一.写在前面: 我们都知道Python一种面向对象的脚本语言,对象是Python中非常重要的一个概念.在Python中数字是对象,字符串是对象,任何事物都是对象,而它们的核心就是一个结构体--PyOb ...