问题

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. pyqt5 设置窗口按钮等可用与不可用

    setEnabled(True) 设置窗口或者按钮可用,Flase不可用

  2. 函数和常用模块【day05】:不同目录间进行模块调用(八)

    本节内容 1.背景 2.函数功能解释 3.绝对路径和相对路径 4.不同目录间进行模块调用 一.背景 之前写了软件开发目录规范这篇博客,相信很多人都已经知道,我们在写程序时需要遵循一定的规范,不然,就算 ...

  3. 【★★★★★】提高PHP代码质量的36个技巧

    http://www.cnblogs.com/52php/p/5658031.html 不要直接使用 $_SESSION 变量 某些简单例子: $_SESSION['username'] = $use ...

  4. C# 实现Bresenham算法(vs2010)

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. webstorm常用功能FTP,及常用快捷键

    常用的FTP功能截图如下: 打开配置窗口 常用配置选项,填好FTP登录信息后点 Test FTP 测试一下,(测试之前,这里选“被动模式”) 默认选哪个FTP上传 注意这里的路径是开发后的上传和访问路 ...

  6. DEV Winform分页用户组件

    资源部分在QQ群:616945527基于服务端数据分页,你也可以修改成本地分页.调用方法添加用户控件到窗体 public int curPage = 1;public int pageSize = 1 ...

  7. This page is about building Firefox Desktop

    This page is about building Firefox Desktop The Mozilla build system, like the rest of the Mozilla c ...

  8. LeetCode -Reverse Pairs

    my solution: class Solution { public: int reversePairs(vector<int>& nums) { int length=num ...

  9. 第17月第26天 setImageForState变形

    1. 关于UIButton,既可以采用setBackgroundImage 来设置底部图片,同时也可以采用  setImage方法: 两者还是有一定区别的: 首先setBackgroundImage, ...

  10. 用winhotkey添加属于自己的快捷键

    需求 我要使用Win+N快捷键组合打开指定某个文件! 使用方法 打开winhotkey软件,做以下操作: 此刻,就可以用Win+N组合快捷键来打开指定目录了!