移动端web开发，click touch tap区别

转自：
http://blog.csdn.net/sly94/article/details/51701188
移动端用tap时会有穿透问题

一：click与tap比较

click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击

二：tap的穿透处理

使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。

三：穿透原因

问题：在HTML5点击了q以后，弹出b的弹框

因为tap事件是通过document绑定了touchstart和touchend事件实现，$('.q')上，当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面

现在touchend冒泡到了document上，并且$('.b')在页面的最前面，然后就触发了click事件

四：解决穿透问题

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

$(function(){

new FastClick(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的触发

移动端web开发，click touch tap区别相关推荐

移动端web开发---Touch事件详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
移动端 Web 开发踩坑之旅
前言最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的新人们. 一.从布局说起移动端的整体布局一般来说可以分为上中下三个部分,分别为 ...
移动端--web开发
最近看到群里对关于移动端 web开发很是感兴趣,决定写一个关于移动端的web开发概念或框架(宝庆对此很是纠结).也是因为自己一直从事pc 浏览器 web一直对移动端的不是很重视,所以趁此机会也 ...
# 移动端web开发
### 概述随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要. 移动端Web主要指运行在移动端(手机.ipad)的we ...
蓝旭前端开发：GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发目录一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
移动端web开发笔记（一）
我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下! 先搞清楚两个概念,移动端web开发,web app开发 1. 移动web开发(pc端的页面用手机浏览器打 ...
前端移动端web开发（一）
一.前端开发 1.前端开发分类: PC端开发:页面主要运行在PC端浏览器中移动端开发:页面主要运行在手机上移动web开发在移动端表现良好的页面,如新浪网混合式开发(Hybrid App) 也叫 ...
从零开始学习移动端Web开发
背景近年来,随着智能手机的普及,移动端开发受到了异常的关注.从传统的安卓.IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧.本文旨 ...

移动端web开发，click touch tap区别

移动端web开发，click touch tap区别相关推荐

最新文章

热门文章