在移动端执行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事件的更多相关文章

  1. 移动端的click事件延迟触发的原理是什么?如何解决这个问题?

    移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...

  2. 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

    1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...

  3. vue.js下移动端绑定click事件失效,pc端正常的问题

    原因可能是 我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scrol ...

  4. better-scroll在移动端绑定click事件失效

    在做一个列表的时候需要点击列表将列表信息输出,给<li>加个一个很简单的@click,可是没有反应. 原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加 ...

  5. 移动端消除click事件的延迟效果

    https://github.com/Plaputta/jquery.event.special.fastclick 用fastclick事件,类似zepto的tap事件,若想去除连点效果,可在外层显 ...

  6. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  7. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  8. 移动端click事件延时

    在移动端使用click事件会产生300ms的延迟 问题的产生: 移动端存在双击放大的问题,所以在移动端点击事件发生时,为了判断用户的行为(到底是要双击还是要点击),浏览器通常会等待300ms,如果30 ...

  9. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

随机推荐

  1. Netty版本升级血泪史之线程篇

    1. 背景 1.1. Netty 3.X系列版本现状 根据对Netty社区部分用户的调查,结合Netty在其它开源项目中的使用情况,我们可以看出目前Netty商用的主流版本集中在3.X和4.X上,其中 ...

  2. node c#

    blogs.msdn.com/b/brunoterkaly/archive/2012/02/22/node-js-socket-programming-with-c-and-javascript.as ...

  3. 随时可以给doT模板传任何你想要的值

    我以前一直以为只有传给后台的数据才能用doT模板写入, 其实,随时可以把本地处理的数据,仅仅的一个变量,改头换面成一个it关键字下面的属性. 方法就是在tpl中给它赋值. 要注意的是,首先tpl中的属 ...

  4. 3.2 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里,局部变量放哪里,静态区在哪里.....进来)

    (1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据目标在运行时刻的存储空间需求,因而在编 译时就可以给 ...

  5. 启用VSFTPD日志及其解读

    启用vsftpd日志及其解读(转贴)在vsftpd.conf中有如下内容定义了日志的记录方式:# 表明FTP服务器记录上传下载的情况xferlog_enable=YES# 表明将记录的上传下载情况写在 ...

  6. Linux 关机命令 重启命令

    Linux centos重启命令: 1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shut ...

  7. bzoj1260

    很容易脑补出来的区间dp O(n3)的 var f:array[0..51,0..51] of longint;    i,n,j,l,k:longint;    s:string; function ...

  8. bzoj1853 bzoj2393

    两题是类似的,这里说一下bzoj1853 首先我们求出所有的幸运号码,注意如果存在x是y的倍数则x不算在内,避免之后重复计算 下面我们就要统计幸运号码的倍数了,这显然是要用到容斥原理的 但是幸运号码很 ...

  9. IE 弹出"Unable to do xml/xsl" Processing

    解决方法:

  10. 用delphi的THTTPRIO控件调用了c#写的webservice。

    用delphi的THTTPRIO控件调用了c#写的webservice. 下面是我调试时遇到的一些问题: 1,导入wsdl文件:file--new----other----wenservice---W ...