说说移动端web开发中的点击穿透问题
最近一直在忙于一个无线端的项目,由于之前主要工作都是在桌面端,移动端接触的比较少,所以中间遇到了很多的坑,做一个简单的记录。
问题背景
需求中有这样的一个功能,点击取件信息的时候会弹出一个地址列表的浮层,用户选择地址之后会将具体的地址回填到取件信息当中去。按道理讲,这是一个非常简单的功能,可是在开发过程中却遇到了很多非常诡异的事情。
初始的代码是这么写的:
var pickupInfo = $("#pickupInfo");
pickupInfo.on("tap", function () {
var addressList = $("#addressList");
addressList.show();
});
window.addEventListener("message", function () {
// 回填地址信息
});
// addressList 是一个浮层
$("#addressList li").on("click", function () {
// 此处回填地址到取件信息中去
// 具体方式则是通过iframe的postMessage发送消息,pickupInfo那边接收消息后填充
});
为了更清楚的说明问题,此处删除了很多的业务逻辑。
在测试过程中就发现了一个诡异的问题,在点击pickupInfo的时候,addressList浮层闪了一下就消失了,弹出addressList浮层后立即回填了地址信息。
因为一开始也没有太注意观察,跟代码的过程中发现只要浮层一弹出,pickupInfo那边就立即收到了message事件信息。当时第一反应感觉是地址列表那边出了问题,看了好几遍代码,一直没发现哪里有问题,也跟了几次,每次都是地址列表一弹出就立即触发了click事件。
奇了个怪了!
点击穿透
试着描述了下问题google了一把,可能是描述的不太准确,啥也没搜着。没办法了,瞪大眼睛再操作一遍。这时候奇迹出现了,我发现每次点击pickupInfo,都在选中addressList中相对于屏幕与pickupInfo相同位置的地址。
查看了下事发地点的代码,然后在google中敲下了这几个字“移动端 tap”,一大堆的结果,看了几篇文章,终于找到了问题的答案。
先说说touch事件吧。
我们知道,PC上有鼠标事件,一次点击可以拆分成mousedown > click > mouseup 三步。移动端没有鼠标,但是有类似的触摸事件,用户的一次点击可以分为touchstart > touchmove > touchend。 虽然手机上没有mouse事件,但是手机依然可以响应mouse事件,为什么呢?是通过touch事件来模拟的。有人曾经对比测试过手机上和PC上的mouse事件,发现手机上的mouse要慢一些,大概在300m左右。
再说说tap事件。
在PC端,我们经常使用到click事件,对应到移动端,我们使用tap事件。但原生的touch事件本身是没有tap的,也是通过模拟产生的。在Zepto中,如果在touchend事件响应250ms无操作后,会触发singleTap事件。
// trigger single tap after 250ms of inactivity
else {
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
}, 250)
}
至此,点击穿透的原因就明了了。
当pickupInfo监听的tap事件得到响应之后,会立即弹出addressList浮层,此时浏览器还会触发click事件,而此时原来的pickupInfo已经完全被addressList遮罩,所以click事件就被触发在了与pickupInfo相同位置的addressList中对应的区域,也就正好响应了addressList中监听的click事件。
世事奈何如此之巧~
解决方案
问题清楚了,修改方法也就明确了,由于项目还在开发中,个人觉得当前的方案还不是特别好,后续优化后再贴出来。这里贴篇文章,也来说说touch事件与点击穿透问题,里面对touch和tap事件做了详细的说明,对点击穿透问题也提到了几个方案,可以参考。
小结
这两天一直在忙于赶开发进度,对于过程中遇到的一些典型的问题做一些记录,算是一种沉淀吧~~
说说移动端web开发中的点击穿透问题的更多相关文章
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 移动端web开发中对点透的处理,以及理解fastclick如何做到去除300ms延迟
一.点透问题以及处理办法 开发中遇到一个问题,就是点击layer弹出框的取消按钮之后,按钮下方的click事件就直接触发了.直接看代码: $('.swiper-slide').on('click', ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- Redis在WEB开发中的应用与实践
Redis在WEB开发中的应用与实践 一.Redis概述: Redis是一个功能强大.性能高效的开源数据结构服务器,Redis最典型的应用是NoSQL.但事实上Redis除了作为NoSQL数据库使用之 ...
- Web开发中的主要概念
一.Web开发中的主要概念1.静态资源:一成不变的.html.js.css2.动态资源:JavaWeb.输出或产生静态资源.(用户用浏览器看到的页面永远都是静态资源) 3.JavaEE:十三种技术的集 ...
随机推荐
- ViewResolver 视图解析器
pringMVC 视图解析器 前言 在前一篇博客中讲了 SpringMVC 的Controller 控制器,在这篇博客中将接着介绍一下 SpringMVC 视图解析器.当我们对SpringMVC控制的 ...
- phpize命令在安装AMQP插件是报错phpize:Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF envir的解决方法
phpize命令在安装AMQP插件是报错phpize:Cannot find autoconf. Please check your autoconf installation and the $PH ...
- delphi将工程文件转成dll
1.点击[File]—>[New]—>[Other]菜单项,打开[New Items],选择[New]: 2.选择[Dll Wizard]选项卡,点击ok,DLL工程创建成功. 3.点击[ ...
- [Postgres]关于Postgres的INHERIT,分表
实在是很强大的功能 可以通过Check的制约把结构相同的表合并起来,或者反过来说,可以在一个表名下数据库自动的根据Check条件往对应的分表里存储数据 [USER_DATA表] CREATE TABL ...
- button的onclick函数一直刷新
button中的onclick写成函数时需要 <button onclick="return function();"></button> 加一个retur ...
- 工作中的Buff加成-结构化思考力:第一章:认识结构化思维及其作用
一:引言 为了更好的说明结构思考力,我们先来做几个小测试. PS:如果你能做到,请留言,因为我要和你交好友,因为你是人才啊,可以挖一挖,挖到我的公司中. 第一个测试:请在三秒内记住下列数字.数字顺序不 ...
- Mysql数据操作《三》多表查询
多表连接查询 复合条件连接查询 子查询 准备表 #建表 create table department( id int, name varchar(20) ); create table employ ...
- 原生态js展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [bzoj2816][ZJOI2012]网络(LCT,splay)
传送门 题解 话说以前还真没见过用LCT只维护一条链的……好像除了树点涂色那题…… 先看一下题目规定的两个性质 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜 ...
- [ActionScript 3.0] 简单倒计时
import flash.utils.Timer; import flash.events.TimerEvent; import flash.text.TextField; var text:Text ...