app中页面滑动,防止a链接误触
问题
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链接误触的更多相关文章
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
- 提升现代web app中页面性能
提升现代web app的中的页面性能 前言,本文翻译自https://docs.google.com/presentation/d/1hBIb0CshY9DlM1fkxSLXVSW3Srg3CxaxA ...
- 怎样禁止手机app 中页面有时候会把数字当做电话号码,从而自动进行打电话功能
想要禁止这种功能,只需要给头不加一个meta标签就可以了, <meta name="format-detection" content="telephone=no& ...
- 浏览器通过Scheme协议启动APP中的页面
在APP开发过程中,通过外部浏览器调起APP页面的场景也很普遍使用.下面就介绍一下通过外部H5页面唤起APP中页面的通用方法. 1.首先需要在AndroidMainifest.xml中对你要启动的那个 ...
- Django实现自定义template页面并在admin site的app模块中加入自定义跳转链接
在文章 Django实现自定义template页面并在admin site的app模块中加入自定义跳转链接(一) 中我们成功的为/feedback/feedback_stats/路径自定义了使用tem ...
- APP中的 H5和原生页面如何分辨、何时使用
一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅. H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- APP中内嵌H5页面为什么不能下载?
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
- APP中的 H5和原生页面如何分辨?
一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...
随机推荐
- (递推 大整数) Children’s Queue hdu1297
Children’s Queue Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 使用sed替换指定文件指定行的指定文本
下面是将85行的127.0.0.1替换为192.168.10.108 sed -i '85{s/127.0.0.1/192.168.10.108/}' /etc/zabbix/zabbix_agent ...
- 面向对象【day08】:类的特殊成员(一)
本节内容 1.__doc__2.__module__和__class__3.__init__4.__del__5 .__call__6 .__dict__7 .__str__8 .__getitem_ ...
- 学习windows编程 day6 之处理鼠标移动
#define POINT_MAX 1000 LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lPara ...
- Frame size of 257 MB larger than max allowed 100 MB
ActiveMQ有时会报类似Frame size of 257 MB larger than max allowed 100 MB的错误,意思是单条消息超过了预设的最大值,在配置文件中 <tra ...
- UVALive - 3266 Tian Ji -- The Horse Racing(贪心)
题目链接 题意 两人赛马,每居获胜得200,平局无事发生,输了也输200.求最优的策略使赢的钱最多. 分析 排序,从最快的开始比,若比不过,则用最弱的消耗最强的.模拟即可. #include<i ...
- Python基础(协程函数、内置函数、递归、模块和包)-day05
写在前面 上课第五天,打卡: 凭着爱,再回首: 一.协程函数(生成器:yield的表达式形式) 1.yield 的语句形式: yield 1 - 这种方式在 Python基础(函数部分)-day04 ...
- 18. Spring Boot 、注册Servlet三大组件Servlet、Filter、Listener
由于SpringBoot默认是以jar包的方式启动嵌入式的Servlet容器来启动SpringBoot的web应用,没有web.xml文件 public class MyServlet extends ...
- luogu 4401 矿工配餐 多维dp
五维dp,记忆化搜索会MLE超内存,所以用滚动数组,十分经典 五维dp #include <bits/stdc++.h> using namespace std; ; ][][][],la ...
- 【BZOJ2749】【HAOI2012】外星人[欧拉函数]
外星人 Time Limit: 3 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description Input Output 输出te ...