关于移动端的Click事件
在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果。
先了解一下移动端Click的执行顺序: touchstart - > touchmove -> touchend -> mouseover ->mousemove ->click, 从这个执行顺序可以看出,走完这个过程,300毫秒到click响应不足为奇了。
既然如此,我们完全可以通过touchstart来取代click事件,另外,也可以在click事件里,对event的type来判断来快速执行响应。
IOS阻止默认click事件原理,需要主要的是:
(1)只是针对IOS,其它平台不必阻止;
(2)在touchend时就看手指移动情况来觉得该阻止click或者是取消touch事件;
(3)只有event类型为click时才有必要阻止。
在touchend的时候与touchstart时比较时间,位置,以区别是否执行“按下”的操作。值得一提的是,Zepto的tap事件,已经很好的为我们解决了这个问题。
关于移动端的Click事件的更多相关文章
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
- 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js
1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...
- vue.js下移动端绑定click事件失效,pc端正常的问题
原因可能是 我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scrol ...
- better-scroll在移动端绑定click事件失效
在做一个列表的时候需要点击列表将列表信息输出,给<li>加个一个很简单的@click,可是没有反应. 原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加 ...
- 移动端消除click事件的延迟效果
https://github.com/Plaputta/jquery.event.special.fastclick 用fastclick事件,类似zepto的tap事件,若想去除连点效果,可在外层显 ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端click事件延时
在移动端使用click事件会产生300ms的延迟 问题的产生: 移动端存在双击放大的问题,所以在移动端点击事件发生时,为了判断用户的行为(到底是要双击还是要点击),浏览器通常会等待300ms,如果30 ...
- 移动端 之 触摸事件、Tap事件和swipe事件
触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...
随机推荐
- bzoj 3624: [Apio2008]免费道路 生成树的构造
3624: [Apio2008]免费道路 Time Limit: 2 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 111 Solved: 4 ...
- [BZOJ 1733] [Usaco2005 feb] Secret Milking Machine 【二分 + 最大流】
题目链接:BZOJ - 1733 题目分析 直接二分这个最大边的边权,然后用最大流判断是否可以有 T 的流量. 代码 #include <iostream> #include <cs ...
- 2016年 IT 趋势大预测!
新年伊始,有不少人在总结过去,也有一些人在展望未来.下面让我们跟随 OpsClarity 的 Dhruv Jain,看看他对 2016 IT 趋势有什么大胆的预测. 又到了众人纷纷对下一年进行预测的时 ...
- MYSQLl防注入
1.简单sql防注入 简述: 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令. 在某些表单中,用户输入的内容直接用来构造(或 ...
- Delphi直接让QT进入指定房间
WinExec('./QT/QT.exe qt://join/?roomid=3955&subroomid=287307288&ext=gid:536023504;et:1001', ...
- 【HDOJ】1688 Sightseeing
Dijkstra求解次短路径,使用cnt和dis数组记录最小.次小的个数和长度.重写更新操作. /* 1688 */ #include <iostream> #include <st ...
- 深入浅出Node.js (附录C) - Node编码规范
C.1 根源 C.2 编码规范 C.2.1 空格与格式 C.2.2 命名规范 C.2.3 比较操作 C.2.4 字面量 C.2.5 作用域 C.2.6 数组与对象 C.2.7 异步 C.2.8 类与模 ...
- 使用 Gradle 实现 TFS 构建自动化
发布于 2014-07-16 作者 陈 忠岳 感谢微软开放技术有限公司(简称"微软开放技术")发布的构建模板,我们现在便可以在 Team Foundation Server(TFS ...
- (转载)MySQL BETWEEN 用法
(转载)http://www.5idev.com/p-php_mysql_between.shtml MySQL BETWEEN 语法 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值 ...
- iOS不越狱装收费App——注册iOS设备为开发者工具
额,这篇教程主要是我写下来用于总结注册iOS设备和用iResign安装App的过程,想要不越狱安装App当然有办法,但是有几个前提--你是一个Apple开发者,或者你有个朋友是App的开发者.如果没有 ...