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

四:解决穿透问题

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前端学习交流群21 598399936

时间: 2024-07-31 13:33:04

移动端web开发click touch tap区别的相关文章

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,

移动端web开发的一些知识点

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#000; -webkit-transform: sc

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

移动端--web开发

最近看到群里对关于 移动端 web开发很是感兴趣,决定写一个关于 移动端的web开发 概念或框架(宝庆对此很是纠结).也是因为自己一直从事pc 浏览器 web一直对 移动端的不是很重视,所以趁此机会也让自己对 移动端的开发 有个清晰的认识. 环境: 1. 移动端的内核:手机浏览器的内核是什么 在文章中 Android 手机 采用 Webkit.其他的QQ,UC,飞豚 浏览器都基于此开发的.而在iOS以及WP7平台上,由于系统封闭,不允许除  系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器

探究移动端web开发

探究移动端web开发 什么使移动端开发呢?这就是在手机等移动端设备上的网页开发.而当今比较流行的通过rem进行移动端的适配,所以这篇文章会主要介绍一些基本概念以及rem适配方案. 第一部分:基本概念 物理像素:这个就是在屏幕上可以控制的最小显示单位,比如显示颜色的最小单位. css像素: 就是我们在设计网页时在css中使用的像素,比如:border: 1px black solid;这里的1px即为css像素,实际上这种像素就是下面我们要介绍的设备独立像素. 设备独立像素(density-ind

移动端Web开发注意点

不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好. 所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的. 丰富的页面Meta 控制显示区域各种属性: <meta content="width=devic

移动端 Web 开发前端知识整理

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde