移动端的问题

移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有click,就会进行放大缩小。

  但是,问题是大部分时候放大、缩小时不需要的,有时开发者也会禁用他们,那么300ms的延迟就是性能上的损耗的,所以,如何解决这300ms的延迟? 在移动端,最容易想到的就是使用touchend来替代click,但是touchend是存在很大的问题的,因为touchend之前可能是touchstart、touchmove,最后才是touchstart,具体情境可能是用户滑动页面时,不小心在一个按钮那里触发了touchend,这样就执行了,但是用户的本意不是如此。 那么该怎么解决呢?

tap事件

为了减少这300ms的延迟,tap事件被很多框架(如zepto)封装,来减少这延迟问题, tap事件不是原生的,所以是封装的,那么具体是如何实现的呢?

主要考虑到下面两点:

  • 按住的事件不能超过延时时间,因为长时间可能就是浏览器的复制、粘贴等操作了。
  • 不能在页面中移动,移动是不能触发tap事件的。

我们可以封装如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tap</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<button id="btn">按钮</button>
<script>
function tap(ele, callback) {
// 记录开始时间
var startTime = 0,
// 控制允许延迟的时间
delayTime = 200,
// 记录是否移动,如果移动,则不触发tap事件
isMove = false; // 在touchstart时记录开始的时间
ele.addEventListener('touchstart', function (e) {
startTime = Date.now();
}); // 如果touchmove事件被触发,则isMove为true
ele.addEventListener('touchmove', function (e) {
isMove = true;
}); // 如果touchmove事件触发或者中间时间超过了延迟时间,则返回,否则,调用回调函数。
ele.addEventListener('touchend', function (e) {
if (isMove || (Date.now() - startTime > delayTime)) {
return;
} else {
callback(e);
}
})
} var btn = document.getElementById('btn');
tap(btn, function () {
alert('taped');
});
</script>
</body>
</html>

如上,我们就可以正常使用tap事件并且避免了300ms延迟的产生。

点透问题

如果我们在移动端所有的click都替换为了tap事件,还是会触发点透问题的,因为实质是: 在同一个z轴上,z-index不同的两个元素,上面的元素是一个绑定了tap事件的,下面是一个a标签,一旦tap触发,这个元素就会display: none,而从上面的tap可以看出,有touchstart、touchend,所以会300ms之后触发click事件,而z-index已经消失了,所以,触发了下面的a的click事件,注意: 我们认为a标签默认是绑定了click事件的。而这种现象不是我们所期待的。

解决方案: (1)使用fastclick。 (2)添加一个延迟。

(1)直接引入fastclick库。

window.addEventListener("load", function () {
FastClick.attach(document.body);
}, false);

这样,就可以成功解决问题了。

(2)对于上一个tap做延迟。

tap(ele, function () {
setTimeout(function () {
ele.style.display = 'none';
}, 300);
})

这样,过了300ms,那么click事件就不会触发在下面的a标签上了。

移动端tap与click的区别 && 点透事件的更多相关文章

  1. 移动端web,tap与click事件

    一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...

  2. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  3. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  4. 移动端touch、click、tap的区别

    一.click 与tap比较 click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件.singleTap 和 ...

  5. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  6. 移动端tap或touch类型事件的点透问题认识

    1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B ...

  7. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  8. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  9. 移动端tap事件(轻击、轻触)

    一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...

随机推荐

  1. imp高版本的dmp文件报错问题

    imp高版本的dmp文件报错问题   导出方:oracle 11R2  www.2cto.com     导入方:oracle 10R2   通过imp导入时提示如下:     解决方法:   通过编 ...

  2. db_recovery_file_dest_size

    select name,space_limit,space_used,number_of_files from v$recovery_file_dest; alter system set db_re ...

  3. SpringMVC中fastjson支持jsonp的实现

    前边一篇文章主要说了下前端处理jsonp的方式,这篇主要介绍了后台接收和响应jsonp的一种方式 继承fastjson消息转换器类:com.alibaba.fastjson.support.sprin ...

  4. centos 编译安装PHP5.4

    2013年12月29日 19:52:30 已经安装好Apache 2.4 php版本 5.4 ./configure --prefix=/usr/local/lamp/php --with-apxs2 ...

  5. Linux下进程/程序网络带宽占用情况查看工具 -- NetHogs

    http://www.vpser.net/manage/nethogs.html   来自.  最后略有修改 之前VPS侦探曾经介绍过流量带宽相关的工具如:iftop.vnstat,这几个都是统计和监 ...

  6. Android动画分类

    动画分类 View动画(补间动画).帧动画.属性动画 View动画(补间动画)包括:平移.旋转.缩放.透明度,View动画是一种渐近式动画 帧动画:图片切换动画 属性动画:通过动态改变对象的属性达到动 ...

  7. myeclipse2017 安装包及破解插件的下载

    一:安装包下载 链接:http://pan.baidu.com/s/1miIFqha 密码:nz7h 二:操作步骤 因为工作中需要有多个MyEclipse去管理不同的项目组的工作,恰逢MyEclips ...

  8. how to detect circles and rectangle?

    opencv中对圆检测的函数为:HoughCircles(src_gray,circles,CV_HOUGHT_GRADIENT,1,src_gray.cols/8,200,100,0,0) circ ...

  9. PHP实现字符串转义和还原

    首先大家可以简单了解下什么是转义字符?有什么用? 转义字符是一种特殊的字符常量.转义字符以反斜线"\"开头,后跟一个或几个字符.转义字符具有特定的含义,不同于字符原有的意义,故称“ ...

  10. poj1470 LCA倍增法

    倍增法模板题 #include<iostream> #include<cstring> #include<cstdio> #include<queue> ...