移动端web开发click touch tap区别

移动端用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事件

更多web前端免费学习资料加群领取，群号434623999

转载于:https://www.cnblogs.com/CCDS01/p/8038787.html

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

移动端web开发，click touch tap区别
转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题一:click与tap比较 click与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区别相关推荐

最新文章

热门文章