mui中a标签的跳转问题

一、脑补

快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作!!!

二、解决办法

  1. 给需要跳转的 a 标签添加一个类名  a

    document.querySelectorAll(".a").forEach(function (val,key) {

     val.addEventListener(‘tap‘, function(){

      window.top.location.href=this.href;
       })
    })


  2. 网上很多人提出的(但是在我这里不起作用)

    mui(‘body‘).on(‘tap‘,‘a‘,function(){
      window.top.location.href=this.href;
    });

原文地址:https://www.cnblogs.com/zhangruiqi/p/8176724.html

时间: 2024-10-23 07:33:16

mui中a标签的跳转问题的相关文章

使用mui框架后a标签无法跳转

由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添加点击事件,但效果依然是无法跳转,查资料发现mui搞得鬼: 我的代码主要是下边代码搞得鬼: //删除出行人  mui('body').on('tap','.business_icon_remove',function(){    var parentNode_1 = this.parentNode,     

HTML中button标签点击实现页面跳转的三种方法

方法1:使用onclick事件12<input type="button" value="按钮"onclick="javascrtpt:window.location.href='http://www.9252.com/'" /> 或者直接使用button标签1<button onclick="window.location.href = 'https://www.9252.com/'">儿童</

mui中的关闭页面的几种方法

一.总结: mui中关闭当前页面的几种方式: 1.swipeBack(暂未测试过) 2.keyEventBind(暂未测试过) 3.给标签的class加.mui-action-back(返回的是前一个页面) 4.也可以直接调用mui.back()方法,实现关闭页面逻辑 例如在实现查询功能的时候,在查询页面输入查询条件,然后返回到列表页面显示查询的结果,用mui.back()返回前面的列表页面 5.在mui.init()方法中加beforeback(可以返回指定页面),这是针对带有返回导航箭头的标

HTML中&lt;meta&gt;标签的使用

HTML中<meta>标签的使用 <meta>标签基本介绍 <meta>标签是HTML网页源代码中一个重要的html标签.META便签用来描述一个HTML网页文档的属性,例如作者.日期.关键词.页面刷新.除此之外<meta>标签用于搜索引擎优化(SEO).它位于HTML文档中<head>元素内,虽然它提供的信息不可见,但它却是文档最基本的元信息. <meta>标签的属性列举 <meta>标签中属性可以分为必选属性和可选的属

APP中添加标签设计

app设计在视频/图片/文字发布过程中添加标签设计总结 标签,主要是给与用户上传的内容添加标签,这类标签主要有一下几点作用: 1.便于找到相似标签好友,提高产品社交属性: 2.便于归类内容,便于用户和后台进行数据抓取: 3.便于运营相关活动,提升产品互动性: 标签主要是在视频或照片拍摄/编辑结束后,在发布页出现的功能,发布页面具有的通用功能包括:封面(针对视频而言),图片缩略图,标题,描述,地点,标签,@他人,隐私权限,分享/同步到 几项信息,其中按照产品定位的权重及应用本身的属性特质,几点内容

java 处理html代码 中&lt;p&gt; 标签 保证闭合

需求: 处理一段html代码中<p>标签,使其不嵌套,闭合,无内容暴露在标签之外 例如: 11111<p></p>22222<p>33333</p><p>44444</p>555555<p></p>66666 思维导图: 代码: public static String checkpp(String content){ String Str; int time =0; int pos =0; int

html中a标签中的onclick和href的使用

下面代码则执行了subgo()函数, <a href="javascript:void(0)" onclick="subgo()">点我</a> 在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo(). <a href="#" onclick="subgo()">点我</a>与<a href="javascr

vue中的锚链接跳转问题

vue中的锚链接跳转问题 在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的  scrollBehavior 滚动行为 在router.js中 //创建 router 实例 const router = new VueRouter({ routes, mode: 'history', scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } } })

HTML中&lt;meta&gt;标签如何正确使用

如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少<meta>元素.对于网页而言,<meta>元素是必不可少的.我们在创建一个html5文档时,就会发现类似于<meta charset="UTF-8">这样的标签,来规定解析文档的字符类型.那么,它还有哪些作用呢?下面,我将一探究竟!我会通过下面几个部分来讲解,如果你希望直接看后面部分的内容,可以直接点击下面的