移动端web,tap与click事件
一、tap与click的区别
singleTap和doubleTap 分别代表单次点击和双次点击。
tap封装了touchstart、touchmove、touchend三个事件的处理(touchstart之后如果有产生touchmove则取消此次tap事件的产生) click则只是单纯的绑定了浏览器的click事件。
二、tap事件点透问题
三、tap事件点透解决
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源码不依赖其他库所以你可以在原生的js前直接加上window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上$(function() {
FastClick.attach(document.body);
});
当然require的话就这样:var FastClick = require("fastclick");
FastClick.attach(document.body, options);
实践开发中,当元素绑定fastclick后,click响应速度比tap还要快一点。
2.对于B元素本身存在默认click事件的情况,应用touchend代替tap事件并阻止掉A元素touchend的默认行为preventDefault(),从而阻止click事件的产生。 $("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果
理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,改用click。特别是对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。
如何解决穿透:
方法一:直接将上层元素的tap事件换成click事件(会出现300ms的延迟触发事件)
方法二:在click事件触发前阻止它,如在touchend的事件中使用e.preventDefault()来阻止后续的click事件
zepto为何不使用e.preventDefault()来解决穿透问题?
因为zepto的tap事件统一是在document的touchend时触发的,若在这里使用e.preventDefault(),那页面上所有元素在touchend后触发的事件都不会被执行了。
移动端web,tap与click事件的更多相关文章
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端web开发,click touch tap区别
转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击 ...
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...
- 移动端Web界面滚动touch事件
解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- web开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
随机推荐
- bzoj千题计划187:bzoj1770: [Usaco2009 Nov]lights 燈 (高斯消元解异或方程组+枚举自由元)
http://www.lydsy.com/JudgeOnline/problem.php?id=1770 a[i][j] 表示i对j有影响 高斯消元解异或方程组 然后dfs枚举自由元确定最优解 #in ...
- CS53 C 单调栈
给出一个目标序列,初始序列为0,你有一种操作方式可以将某段值相同的区间全部加上一定的值,问得到目标序列的最小次数. 开始没注意要求值相同,想都不想就暴力了,后来发现对于每个峰,只要找每个相对峰顶的阶数 ...
- BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(昨天某个群友表示写的简单了点,然后我无情的把他的抄了一遍)
(某个群友)http://www.cnblogs.com/coco1s/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大 ...
- [转载]Web API OData Inlinecount not working
http://stackoverflow.com/questions/15422831/web-api-odata-inlinecount-not-working
- Flex 数组问题!
设计一个图形类,来对应一个图形! 这个类大概的代码是: public class ShapeModel extends ... { [bindable] private var _x:Number = ...
- Export SQLite data to Excel in iOS programmatically(OC)
//For the app I have that did this, the SQLite data was fairly large. Therefore, I used a background ...
- 解决getJSON跨域登录Session丢失的问题
最近在做项目中发现,我用下面的代码异步请求到login.ashx: var memberUrl = rooturl + 'member.ashx?r=' + Math.random() + '& ...
- c# XML读取
System.Xml 命名空间 https://msdn.microsoft.com/zh-cn/library/gg145036(v=vs.110).aspx 一.读取 1.通过 XmlDocume ...
- java 多态缺陷
一,会覆盖私有方法 package object; class Derive extends Polymorphism{ public void f1() { System.out.println(& ...
- vue1.0
vue1.0学习总结 前言 使用vue已经有三.四个月了,但是只是学着使用了一些基本方法.因为现在的前端框架越来越多(Angular,React...),但是我相信万变不离其宗,很多用法框架之间还 ...