移动端WEB开发，click,touch,tap事件浅析(移动端web开发需要学什么)

编辑：rootadmin

推荐整理分享移动端WEB开发，click,touch,tap事件浅析(移动端web开发需要学什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:移动端web开发工具,移动端web开发,移动端web开发,新建一个界面title设置为自己的姓名,移动端web开发入门,移动端web开发工具,移动端web开发需要学什么,移动端web开发入门,移动端web开发,新建一个界面title设置为自己的姓名,内容如对您有帮助，希望把文章链接给更多的朋友！

一、click 和 tap 比较

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

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

二、关于tap的点透处理

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

处理方式：

（1）、

github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应， ready时初始化在body上，如：

$(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 这四个事件

移动端WEB开发，click,touch,tap事件浅析(移动端web开发需要学什么)

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

touchstart ：当手指触摸到屏幕会触发；

touchmove : 当手指在屏幕上移动时，会触发；

touchend : 当手指离开屏幕时，会触发；

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

例如：

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

touchstart -> touchmove-> …… -> touchmove ->touchend

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

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

比如手指在屏幕由上向下拖动页面时，理论上是会触发一个 touchstart ，很多次 touchmove，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 4.0会有这个bug，据说 ios 3.x的版本也会有。

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

转载自：

ViewStub的实战开发一.常见的布局分析在开发的时候，有些布局是要根据条件而动态显示，达到一个布局两用的效果，运用View.VISIBLE和View.GONE去改变布局的可见性，这样的

使用maven构建android项目为什么引入maven构建方式做过java后台开发的人员应该都知道,maven使用解决依赖包管理问题的,同时优化测试，打包，部署等流程的.在android里,maven可以管

Android View 事件分发机制源码解析一直想写事件分发机制的文章，不管咋样，也得自己研究下事件分发的源码，写出心得~首先我们先写个简单的例子来测试View的事件转发的流程~1、案例

标签: 移动端web开发需要学什么

本文链接地址:https://www.jiuchutong.com/biancheng/380997.html 转载请保留说明！

上一篇：android（客户端）+Apache MINA（服务器端）通信的实现智能家居动起来！(android客户端开发是干嘛的)

下一篇：ViewStub的实战开发(viewstock)