[jQuery] Zepto的点透问题如何解决?

[jQuery] Zepto的点透问题如何解决?

1、“点透”是什么你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。在前面的项目中遇到了如下图的问题:在点击弹出来的选择组件的右上角完成后会让完成后面的input输入框聚焦,弹出输入键盘,也就是点透了2、为什么会出现点透呢?
这个需要从zepto(或者jqm)源码里面看关于tap的实现方法:
View Code可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。3、点透的解决方法:方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );或者有zepto或者jqm的js里面加上1 $(function() {
2     FastClick.attach(document.body);
3 });当然require的话就这样:1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });方案三:延迟一定的时间(300ms+)来处理事件1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,用click

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

确认要从桌面删除计算机,确定要从界面上删除 我的电脑 ...

桌面所有图标消失应该是系统外壳程序explorer.exe没有正常启动或被关闭造成的,可以在任务管理器(CTRLALTDEL)中手动运行explorer.exe找回桌面.造成该问题的主要原因有:1.恶意程序/病毒破坏你可以重启系统并按F8进入安全模式,选择专业的杀毒软件对系统分区进行全面扫描,如果是恶…

birt报表表格边框_Python 快速设置 Excel 表格边框

1. 安装 xlwings直接安装用 pip install xlwings2. 导入 xlwingsimport xlwings as xw3. 打开 Excel 文件# 打开存好的 Excelapp xw.App() # 设置应用wb xw.Book(data/小蜜蜂超市销售报表.xlsx) # 打开文件ws wb.sheets[Sheet1] # 选择表格4. 获取表格行列last_column ws.…

[jQuery] jQuery UI怎样自定义组件?

[jQuery] jQuery UI怎样自定义组件? 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致。 如何开始使用首先用$.widget()方法开始定义你的组件,它只接收三个参数:第一个是组件名称,第二个是可选…

在VS中进行对项目进行编译出现不能编译的问题

在用VS工具开发的ASP.NET应用程序时,有时会出现C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files这个文件夹的CSC.exe编译应用程序已存在还是什么,该应用程序就是编译不过去一直报这个错误。 解决办法: 1、先把“任务…

计算机辅助制造期末试题答案,精编国家开放大学电大本科《机械CAD-CAM》2025期末试题及答案(试卷号:1119)...

版权声明:以上文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系:55525090qq.com,我们立即下架或…

矢量合成和分解的法则_力的合成与分解

1力的合成一、合力与分力当一个物体受到几个力的共同作用时,我们常常可以求出这样一个力,这个力产生的效果跟原来几个力的共同效果相同,这个力就叫做那几个力的合力,原来的几个力叫做分力.二、合力与分力的关系1.合力与…

[导入]相片: 53787515.jpg

文章来源:http://img.blog.163.com/photo/5VZ9bIclg8NWuT90ExHHmQ/1697575584542151534.jpg转载于:https://www.cnblogs.com/baiyirui/archive/2008/04/27/1173122.html

超导量子计算机速度多快,我国量子计算机实现量子霸权,计算速度比谷歌快了100亿倍...

12月4日,中国科学技术大学宣布,我国新构建的76个光子的量子计算机实现了量子霸权。在5000万个样本的高斯玻色取样实验中,“九章”量子计算机仅用了200秒就完成了,如果使用世界第三的超级计算机进行实验,它也要将近20亿…

初一辍学学php能行吗_《夺冠》破7亿,辍学的农村姑娘成排球女王,朱婷:百炼才能成钢...

分享职场故事,交流职场经验,欢迎关注“闫湘”。《夺冠》累计票房7亿,让大家再一次领略了女排精神,而“2019-2020年中国运动员传播影响力榜第1名,朱婷!”朱婷这个名字又一次响彻全中国。与今天的风光不同&am…

关于eclipse项目的x号报错的一些问题

有些时候项目中并未有什么问题 但项目前会有一个X号报错且无法运行项目 我们不妨从jre和Tomcat的一些配置中找原因 1,首先查看jre的安装是否正确,可以看见并未出错 ,如果有问题,重新导入一下即可 2,打开项目的Java bui…

提高计算机水平的小技巧,五大电脑小技巧

而随着生活水平的提高,家家现在都有一台电脑,使用电脑的技巧也是五花八门。以下是YJBYS小编搜索整理的关于五大实用的电脑小技巧,供参考阅读,希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生培训网!方法一&#x…

iWindowsMobile Launches Updated ZoomBoard

今天发现一个好东西,发上来和大家分享!它来自iwindowsmobile.com(模拟iphone嫌疑),因为在这里我发现了很多Windows Mobile用户梦寐以求的软件,我想应该叫这个站点为iheartwindowsmobile.com更为贴切,不管它叫什么&…

idea和搜狗输入法快捷键冲突_ubuntu18.04安装搜狗输入法

1. 必要时可获取root权限ubuntu在我们安装时并不是root权限,而是我们自己建立的用户,虽然可以使用sudo 命令,但是有时候还是不方便,毕竟root就是一切.输入 su即可切换root卸载ibusubuntu默认使用ibus管理输入法,官方推荐使用fcitx.我们先卸载ibussudo apt-getremove ibus清除ib…

[NodeJs] npm提供了哪些钩子?各有什么作用?

[NodeJs] npm提供了哪些钩子?各有什么作用? npm 拥有以下的钩子命令:对于任何在 package.json 的 scripts 字段中定义的命令,可以通过 pre 以及 post 名称前缀,额外定义该任务在执行前、后的额外执行的钩子命令。例如…

关于css 的AST 语法树的理解

css 处理插件大致分为压缩css和给css添加浏览器兼容前缀。 cssmin 可以压缩css,大致原理是将使用正则将css 中的注释和空格删除。 px2rem 插件是将css 中的px 转换为 rem,它的原理是 调用了css 的AST对象 ,css插件将css内容解析成 一个javasc…

linux rpm 删除

linux rpm 删除命令格式:rpm -e ( or --erase) options pkg1 ... pkgN参数pkg1 ... pkgN :要删除的软件包详细选项--test 只执行删除的测试--noscripts 不运行预安装和后安装脚本程序--nodeps 不检查依赖性 转载于:https://www.cnblogs.com/wllyy189/arc…

同方专转本计算机视频,同方2011专转本计算机

同方2011专转本计算机 (3页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.9 积分namespace W_{ public partial class Form1 : Form { bool isDotpressed false; decimal dOpDaTa1, dOpDaTa2, dre…

wps流程图怎么不能添加文字_windows不能访问共享文件夹,不能添加共享打印机时,怎么解决呢...

遇到文件夹共享不能访问或者打印机共享添加不了的问题,可以按照下面的方法来操作了。适用于windows7windows8、windows10操作系统。在同一个局域网中,你通过192.168.1.1200或网上邻居不能访问对方主机共享文件夹时,按下面的方法操作&#xff…

周末

每到周末的时候,我就感到压抑,无处可去,无事可做,我为什么那么在乎别人的看法呢?从不主动和人交流,话少的可怜,我一周说的话手指都能数出来,总是感到尴尬,不说话还常常苦闷别人不理…

[html] From表单提交时为什么会刷新页面?怎么预防刷新?

[html] From表单提交时为什么会刷新页面?怎么预防刷新? 因为早期网页交互模型只能是浏览器提交数据给服务器,服务器做出响应重新返回一个页面,浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的 API,更没…