1. 前言
最近发现很多人遇到了zepto中tap点透的问题,网上查阅了很多的资料,并没有发现很好的文章,正好最近在做移动端网站的开发,整理如下。
2. 什么是点透现象( What)
其实点透的出现场景可以总结如下:
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。
在以上情况下,点击A/B重叠的部分,就会出现点透的现象。
<!-- html --> <a href="http://www.baidu.com">点击跳转到百度</a> <div class="modal"></div>
/*css*/ .modal { position: absolute; top: 0; left: 0; width: 200px; height: 100px; background-color: rgba(255,0,0,0.5); }
/*JavaScript*/ <script src="./node_modules/zepto/dist/zepto.js"></script> <script src="./node_modules/zepto/src/touch.js"></script> <script> Zepto(function($){ $(".modal").on("tap",function(){ $(this).hide(); }) }) </script>
注意:这里引入的touch.js模块不在zepto.js模块中,需要单独引入,可以使用npm下载zepto,在src文件夹中就可以找到touch.js
效果如图
当在文字上方点击模态窗时,模态窗隐藏,但是a标签同时也被触发,发生跳转
这就是点透现象。
3. 点透现象出现的原因(Why)
为什么会有tap事件?
click 和 tap两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以用tap代替click作为点击事件。
分析zepto的源码我们发现,zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因),所以在执行完tap事件之后,弹出来的模态窗马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。
4. 解决办法(How)
(1)引入fastclick库
github上fastclick库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:
$(function(){ FastClick.attach(document.body); })
然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
(2)为元素绑定touchend事件,并在内部加上e.preventDefault();
$(".modal").on( 'touchend' , function (e){ //改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发 $demo.hide() e.preventDefault(); //阻止“默认行为” })
(3)延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) { setTimeout(function(){ //很多处理比如隐藏什么的 },320); });
此方法可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果。
4. 总结
个人比较倾向于引入fastclick.js,用着比较习惯。还有网友表示,最新的zepto版本修复了tap的点透现象,这里用的是zepto的最新版本(v1.2.0)做测试,并没有发现修复该问题。
最新评论
大佬
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?