移动端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 ...
随机推荐
- Linux命令(二)关机重启
- jsp前端验证(非常好用)
1.在jsp页面中引入<script type="text/javascript" src="${ctxStatic}/js/valid.js">& ...
- MySQL-存储过程procedure
存储过程:是一个SQL语句集合,当主动去调用存储过程时,其中内部的SQL语句会按照逻辑执行. 1.创建存储过程: -- 创建存储过程 delimiter // create procedure p1( ...
- [转]python ctypes 探究 ---- python 与 c 的交互
近几天使用 python 与 c/c++ 程序交互,网上有推荐swig但效果都不理想,所以琢磨琢磨了 python 的 ctypes 模块.同时,虽然网上有这方面的内容,但是感觉还是没说清楚.这里记录 ...
- input文本框禁止修改文本——disabled和readonly属性的作用及区别
1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...
- Python多线程-2(线程共享全局变量)
例子: from threading import Thread,Lock from time import sleep, ctime global_num = [] def func1(): glo ...
- 洛谷P3375KMP字符串匹配
传送门 #include <iostream> #include <cstdio> #include <cstring> #include <algorith ...
- java 把被检查的异常转换为不检查的异常
一.当我们不知道该怎么处理这个异常,但是也不想把它"吞"了,或者打印一些无用的信息,可以使用异常链的思路解决.可以直接报"被检查的异常"包装进RuntimeEx ...
- laravel 辅助函数
数组&对象 1.array_divide() array_divide 函数返回两个数组,一个包含原始数组的健,另一个包含原始数组的值 [$keys, $values] = array_div ...
- CAS5.2x单点登录(二)cas服务器连接数据库
前面一节应该已经告诉大家如何搭建cas的服务器了,可是搭建好能用吗?我们现在的用户验证是在哪呢?哪个默认的用户名和密码有是在哪呢? 本节就讲一下如何使用cas服务器连接我们自己的用户数据库,毕竟没有哪 ...