一、点透问题以及处理办法

开发中遇到一个问题,就是点击layer弹出框的取消按钮之后,按钮下方的click事件就直接触发了。直接看代码:

$('.swiper-slide').on('click',function(){
window.location.href=url;
});
timer_1=setTimeout(function(){
layer.open({
content:'我是一个弹框',
btn:['下载','取消'],
yes:function(){
window.location.href=url;
}
});
},3000);

点击取消按钮之后,页面直接执行前面的click事件,页面直接跳转了。一开始以为是layer的原因,一直调试,后来发现,原来所谓的“点透”问题。

这就尴尬了,我只是想简单的取消,并没有想跳转啊。解决办法如下,代码改成如下:

$('.swiper-slide').on('click',function(){
setTimeout(function(){
window.location.href=url;
},300);
});

主要思想就是延迟300ms来处理这个事件,这就解决了。但是这又有一个问题,增加了没有必要的300ms。

二、看看其他

1、采用touchend 代替tap

$('.closeBtn').on('touchend',function(e){
  event.preventDefault();
  /*do something*/
});

2、使用fastclick

可以处理点透问题,同时去掉了300ms延迟。

fastclick》

三、fastclick原理

触发时间先后顺序:touchstart  > touchend > click

看上面github上面的代码,就是在touchstart 和touchend之间的时间内(大约是50ms~150ms)内,直接触发元素得click事件(提前),然后就返回了。真正的click事件(300ms)之后的,没有被执行;

同是它还执行了e.preventDefault(),这样就防止了点透的发生。

四、再看看zepto的tab事件

tab事件也是通过touchstart 和touchend模拟出来的,但是tab事件不能很好的阻止点透,因为他在里面加上了时间延迟机制(导致为什么先alert("click")),导致e.preventDefault(),没法执行。

//哪个先?
$("#test").tap(function (e) {
alert("tap");
}).click(function(e)
alert("click");
});

解决办法:添加

$("#test").on("touchend", function (event) {
event.preventDefault();
});

  

 

移动端web开发中对点透的处理,以及理解fastclick如何做到去除300ms延迟的更多相关文章

  1. 彻底理解和解决移动WEB开发中CLICK点透问题

    在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...

  2. 说说移动端web开发中的点击穿透问题

    最近一直在忙于一个无线端的项目,由于之前主要工作都是在桌面端,移动端接触的比较少,所以中间遇到了很多的坑,做一个简单的记录. 问题背景 需求中有这样的一个功能,点击取件信息的时候会弹出一个地址列表的浮 ...

  3. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

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

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  5. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

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

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  9. Redis在WEB开发中的应用与实践

    Redis在WEB开发中的应用与实践 一.Redis概述: Redis是一个功能强大.性能高效的开源数据结构服务器,Redis最典型的应用是NoSQL.但事实上Redis除了作为NoSQL数据库使用之 ...

随机推荐

  1. Tess4J OCR简单使用教程

    Tess4J简介 Tesseract-OCR支持中文识别,并且开源和提供全套的训练工具,是快速低成本开发的首选.而Tess4J则是Tesseract在Java PC上的应用.在英文和数字识别中性能还是 ...

  2. ejs注释问题

    项目中遇到一个问题: 代码如下: 但是代码如下时,却不会出现bug: bug的导火索是ejs的注释: 因为我没有用对注释,所以被注释部分的if语句仍旧生效了. bug的根本原因是没有对mod类型进行判 ...

  3. python 资产管理

    python 资产管理 一.Agent 方式 1.这个方法的优点:使用简单,速度快,适合服务器较多场景使用,缺点:服务器比较占资源,性能会变低. 2.使用Agent的前提条件是客户端(服务器)特别多的 ...

  4. Python中字符串颜色

    格式:\033[显示方式;前景色;背景色m 说明: 前景色 背景色 颜色 --------------------------------------- 30 40 黑色 31 41 红色 32 42 ...

  5. Java中如何实现j并发更新数据库同一条数据

    分情况来说:普通单应用并发.多应用或多台服务器并发 情况一:普通单应用并发 使用关键字synchronized就可实现. 情况二:多应用或多台服务器并发 因多个应用之间并非同一个jvm(应用)内,因此 ...

  6. Struts(二十一):类型转换与复杂属性、集合属性配合使用

    背景: 本章节主要以复杂属性.集合属性类型转化为例,来学习这两种情况下怎么使用. 复杂对象属性转换场景: 1.新建struts_04 web.xml <?xml version="1. ...

  7. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  8. Java集合框架的四个接口

    接口 [四个接口  collection  list  set  map 的区别] collection 存储不唯一的无序的数据 list 存储有序的不唯一的数据 set   存储无序的唯一的数据 m ...

  9. IOS 中openGL使用教程4(openGL ES 入门篇 | 离屏渲染)

    通常情况下,我们使用openGL将渲染好的图片绘制到屏幕上,但有时候我们不想显示处理结果,这时候就需要使用离屏渲染了. 正常情况下,我们将屏幕,也就是一个CAEAGLLayer对象作为渲染目标,离屏渲 ...

  10. jquery ajax 发送邮件例子

    <div class="form"> <dl> <dt>您的称呼<small>(必填)</small></dt&g ...