问题

app中list列表,当我们用手滑动屏幕,屏幕上页面内容会快速滚动,不会因为手已经离开了屏幕而滚动停止,突然手触摸暂停,当手指是在a标签上面时,会跳转链接,这对客户体验及其不好

思路

先判断滚动事件是否已经停止,当停止之后,再给一定时间的延时,之后的点击才有效。这样的话,当快速滚动之后,第一次点击屏幕,让屏幕滚动停止,第二次点击屏幕,如果是点击了一个a标签才能跳转到其他路由

解决代码

$(function() {
//处理 滑动超长list的时候 click页面强行停止页面 可能会触发页面上的a链接
var count = 0,
timer = null;
var oldTop = newTop = $(window).scrollTop(); function log() {
if (timer) clearTimeout(timer);
newTop = $(window).scrollTop();
console.log(++count, oldTop, newTop);
if (newTop === oldTop) {//页面停止做的操作
$("a").removeAttr("onclick");
clearTimeout(timer);
} else {
oldTop = newTop;
timer = setTimeout(log, 100); //没效果时,时间可以稍微设置长一些
$("a").attr("onclick", "return false"); //页面还在滚动中的操作
}
}
$(window).on('touchmove', log);
});

app中页面滑动,防止a链接误触的更多相关文章

  1. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  2. 提升现代web app中页面性能

    提升现代web app的中的页面性能 前言,本文翻译自https://docs.google.com/presentation/d/1hBIb0CshY9DlM1fkxSLXVSW3Srg3CxaxA ...

  3. 怎样禁止手机app 中页面有时候会把数字当做电话号码,从而自动进行打电话功能

    想要禁止这种功能,只需要给头不加一个meta标签就可以了, <meta name="format-detection" content="telephone=no& ...

  4. 浏览器通过Scheme协议启动APP中的页面

    在APP开发过程中,通过外部浏览器调起APP页面的场景也很普遍使用.下面就介绍一下通过外部H5页面唤起APP中页面的通用方法. 1.首先需要在AndroidMainifest.xml中对你要启动的那个 ...

  5. Django实现自定义template页面并在admin site的app模块中加入自定义跳转链接

    在文章 Django实现自定义template页面并在admin site的app模块中加入自定义跳转链接(一) 中我们成功的为/feedback/feedback_stats/路径自定义了使用tem ...

  6. APP中的 H5和原生页面如何分辨、何时使用

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅. H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 ...

  7. Hybrid App中原生页面 VS H5页面(分享)

    本文部分转自  http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...

  8. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  9. APP中的 H5和原生页面如何分辨?

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...

随机推荐

  1. idea中gitlab新创建分支查找不到的原因

    问题: 很多人说是这样解决: https://blog.csdn.net/rodulf/article/details/51536532 然后对于我来说没用............ 这里先说下如何从m ...

  2. transform顺序浅谈

    有用过transform的小伙伴们可能都会遇到一些问题,发现transform得到的结果往往不是我们所想的 例如scale(2,1) rotate(30deg) ,我们预想的结果是一个先放大的元素,然 ...

  3. MySQL_DDL(不定时更新)

    1. //1.创建数据库,并指定字符集为utf8 create database rocker_oa default character set utf8; //2.创建用户,并指定密码为‘root’ ...

  4. Nginx 403 forbidden多种原因及故障模拟重现

    访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 1 index index.php index.html  ...

  5. vue props的理解

    vue用了这么久,今天发现父子组件还是傻傻的分不清,不过还好,今天终于搞懂了 vue中到底什么是父组件,什么是子组件 vue之props父子组件之间的谈话 简单的理解就是:使用的地方是父组件,定义的地 ...

  6. Hive记录-加载文件进行查询操作

    Hive可以运行保存在文件里面的一条或多条的语句,只要用-f参数,一般情况下, 保存这些Hive查询语句的文件通常用.q或者.hql后缀名,但是这不是必须的, 你也可以保存你想要的后缀名.假设test ...

  7. servlet 获取 post body 体用流读取为空的问题【转】

    引用自: http://www.zicheng.net/article/982028.htm 目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式 ...

  8. CentOS6.x网易163yum源配置

    一.备份原yum源 [root@yancy ~]# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.$(d ...

  9. Window上,启动Tomcat服务之后,关闭启动窗口,服务器也随之关闭

    在Window环境上,启动Tomcat服务器之后,随手关闭启动窗口,服务器也随之关闭了. 现在想要的效果是,当关闭启动窗口后,服务器仍然运行. 1. 开始:运行cmd,进入doc命令行 tomcat安 ...

  10. TCP3次握手和4次挥手及其为什么

    TCP 3次握手 客户端向服务器发送一个SYN(包含了SYN,SEQ). 当服务器接收到客户端发过来的SYN时,会向客户端发送一个SYN+ACK的数据包,其实ACK的ack等于上一次发送SYN数据包的 ...