移动端-点透问题 巧妙解决

函数太长
• 阅读 3623

移动端经常出现点透,至于怎么出现的请大家去看一下zepto实现tap的源码。

1、“点透”是什么

你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。

2.为什么会出现点透

zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的

再点击完成时的tap事件(touchstarttouchend)需要冒泡到document上才会触发,而在冒泡到document之前,用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),
所以在执行完tap事件之后,弹出来的选择组件马上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象

3.点透的解决方法:

方案一:来得很直接github上有个fastclick可以完美解决

引入fastclick.js,因为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);

方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

 $("#cbFinish").on("touchend", function (event) {
   //很多处理比如隐藏什么的
    event.preventDefault();
 });

方案三:延迟一定的时间(300ms+)来处理事件

 $("#cbFinish").on("tap", function (event) {
    setTimeout(function(){
    //很多处理比如隐藏什么的
    },320);
 }); 

这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果

理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,用click

点赞
收藏
评论区
推荐文章
Karen110 Karen110
4年前
一篇文章带你了解JavaScript弹出框
在JavaScript中,可以创建对话框或弹出窗口来与用户进行交互。JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框。一、警告框警告框是最简单的弹出框。它使可以向用户显示一条短消息。还包括“确定”按钮,用户必须单击此“确定”按钮才能继续。window.alert()语法:window.alert("msg")方法可以在没有窗口的前缀被写
全栈角度看分页处理
分页是webapplication开发最常见的功能。在使用不同的框架和工具过程中,发现初始行/页的定义不同,特意整理记录。从这个技术点去看不同层的实现。以及不同语言实现的对比。文章会从正常的web结构分层的角度去梳理不同层的处理。分为数据库分页、服务端分页、前端分页
小尉迟 小尉迟
2年前
mac版photoshop 2023存储为窗口显示空白、黑屏如何解决
更新后,很多朋友在安装使用中发现,Mac版的photoshop2023再点击存储后弹出的保存窗口里没有文字内容,只有一个黑色的方框,这个问题怎么解决呢?一起来看看吧!按照下图路径找到Adobe文件夹下的UXP文件夹给UXP文件夹重命名为UXP之后关闭重启P
爱丽丝13 爱丽丝13
5年前
参考阿里规范,优秀的 Java 项目代码该如何分层?
1.背景说起应用分层,大部分人都会认为这个不是很简单嘛就controller,service,mapper三层。看起来简单,很多人其实并没有把他们职责划分开,在很多代码中,controller做的逻辑比service还多,service往往当成透传了,这其实是很多人开发代码都没有注意到的地方,反正功能也能用,至于放哪无所谓呗。这样往往造成后
Wesley13 Wesley13
4年前
vant Popup弹框使用总结
1、基础用法通过vmodel控制弹出层是否展示<vancellislink@click"showPopup"展示弹出层</vancell<vanpopupvmodel"show"内容</vanpopupexportdefault{data(){
Stella981 Stella981
4年前
Linux 命令全集
一、开关机sync:把内存中的数据写到磁盘中(关机、重启前都需先执行sync)shutdownrnow或reboot:立刻重启shutdownhnow:立刻关机shutdownh19:00:预定时间关闭系统(晚上7点关机,如果现在超过8点则第二天)shutdownh10:预定时间关闭系统(10分钟后关机)
Wesley13 Wesley13
4年前
DOM元素的自动隐藏
在一些有悬浮元素的场景中,比如点击一个按钮弹出菜单后,点击菜单以外的地方,菜单应该被隐藏起来。隐藏的方式最好是自动隐藏,或至少是组件内的自动隐藏。蒙层比如,一个模态框组件(闭包实现)点击蒙层时,响应蒙层的点击事件,可以在事件处理函数中隐藏整个组件。在Vue和React等框架的组件中,这一点非常容易实现。<divclass"com
Stella981 Stella981
4年前
O2OA开发平台:(前端)在O2OA中使用系统o2.DL构建弹出框
1、使用O2OA平台封装好对象o2.DL的open方法创建弹出层,传入options参数构建弹出框内容、按钮等元素实现效果:!image.png(https://cdn.nlark.com/yuque/0/2020/png/689690/15918528543063f9ff6b92a2a4e9a82ce704d2f27f3f3.png)
Stella981 Stella981
4年前
Framework7开发使用笔记
1、触发返回键的时候,获取当前页面内容myApp.getCurrentView()获取当前页面名字:myApp.getCurrentView().activePage.name2、关闭所以弹出层myApp.hidePreloader();3、JS代码执行返回ma
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
上海张律师 上海张律师
8个月前
bindsheet+键盘在页面跳转时的bug及处理思路
​HarmonyOS应用开发最近做的一个项目中,有这样的一个需求在A页面中,点击某一项目后,会弹出一个bindsheet,同时,会给TextInput组件自动加上焦点,目的是为了弹出输入框,图片如下:当用户输入了金额数字后,点击“去计算”按钮,则通过rou