一、click 和 tap 比较

两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。

处理方式:

(1)、

github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:

1
2
3
$(function(){
    newFastClick(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
当然,你也可以不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击

实践开发中发现,当元素绑定fastclick后,click响应速度比tap还要快一点点。哈哈

(2)、为元素绑定touchend事件,并在内部加上e.preventDefault();

$demo.on('touchend',function(e){//
改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//
阻止“默认行为”
})
 
三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听,让开发者可以获取用户触摸屏幕时的一些信息。

其中包括:touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件可以类比于mousedown,mouseover
,mouseup的触发。

touchstart : 当手指触摸到屏幕会触发;

touchmove : 当手指在屏幕上移动时,会触发;

touchend : 当手指离开屏幕时,会触发;

当然还有一个touchcancel,是在拖动中断时候触发。

例如:

这4个事件的触发顺序为:

touchmove
-> …… -> touchmove ->touchend

但是单凭监听上面的单个事件,不足以满足我们去完成监听在触屏手机常见的一些手势操作,如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。

其实市面上很多框架都针对手机浏览器封装了这些手势,例如jqmobile、zepto、jqtouch,不过悲剧发生了,对于某些Android系统(我自己测试到的在android 4.0.x),touchmove和touchend事件不能被很好的触发,举例子说明下:

比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchmove
,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart
差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暂时我只发现在android 4.0会有这个bug,据说 ios 3.x的版本也会有。

而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响,所以在直接使用这些框架的event时,或多或少会出现兼容性问题!

转载自:http://www.xuebuyuan.com/2174858.html

移动端click时间、touch事件、tap事件的更多相关文章

  1. 移动端click时间、touch事件、tap事件详解

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  2. 移动端click延迟和tap事件

    一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...

  3. 移动端前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

  4. 移动端tap与click的区别 && 点透事件

    移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...

  5. 移动端前端常见的触摸相关事件touch、tap、swipe

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

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

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

  7. tap事件的原理详解

    点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...

  8. 移动端WEB开发,click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  9. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

随机推荐

  1. CCOrbitCamera

    Cocos2d-x提供了一中根据球面坐标轨迹旋转的方式CCOrbitCamera CC_DEPRECATED_ATTRIBUTE static CCOrbitCamera* actionWithDur ...

  2. CShopDialog类

    #ifndef SHOP_H #define SHOP_H #include "XWidget.h" #include "GameConfig.h" class ...

  3. Memcached安装以及PHP的调用

    Memcached安装以及PHP的调用 [南京·10月17日]OSC源创会开始报名:Swift.大型移动项目构架分享 » 一:安装libevent 由于memcached安装时,需要使用libeven ...

  4. Angular+Electron+VSCode的桌面应用

    Angular+Electron+VSCode的桌面应用 转自:http://blog.csdn.net/yr7942793/article/details/50986696 第一部分 Electro ...

  5. 路由搭建ovpn

    教程一(外网搭建): 1. 注册花生壳帐号,同时系统会赠送一个免费的域名 2.登录华硕路由,找到花生壳代码设置花生壳登录名和密码.域名,删掉前面的"#"后,点击应用本页面设置,软重 ...

  6. 读取数据库中timestamp类型去掉毫秒

    数据库中查询出来的时间是:2015-09-24 14:30:26.2,带有毫秒,需要去掉. 方法一: public static Timestamp getSystemTime() { Date dt ...

  7. XmlFactoryBean和DefaultListableBeanFactory学习

    首先提供了一个Spring容器最简单的例子. bean的定义,MyTestBean.java public class MyTestBean { private String testStr = &q ...

  8. 2018-11-21 ko.pureComputed的使用

    以前一直在想,ko.pureComputed 好像用不上.看起来高大上. 今天在修复一个bug时,发现了它的妙处. 在修改商品列表的页面,弹出一个新增商品的页面.关闭之后,怎么通知修改商品列表的页面发 ...

  9. git 停止在12% writing objects 怎么回事?

    git 停止在12% writing objects 怎么回事? 输入以下代码试一下: git config --global http.postBuffer 524288000  

  10. 把本地仓库导入到Github

    1, create a new rep 2, 进入到本地仓库: $ git remote set-url origin URL 3,上传 git push -v ref: https://www.do ...