Zepto Click点透情况解决办法
来源:互联网 发布:白犀牛网络语什么意思 编辑:程序博客网 时间:2024/05/18 00:45
Zepto Click点透情况解决办法
一、如何发生
点透事件据我的理解,就是因为Zepto在Click事件上有300毫秒的延迟,为了跟其他各种各样的乱七八糟的东西兼容。但是很不凑巧,我们是在一个模态弹出框上绑定了这样一个延迟300ms的点击事件,点击事件又会被冒泡到最下层,而最下层刚好是一个输入框。这样事件就会被这个输入框给捕捉,导致最上层事件无法触发(具体更深层次原因未知,只是知道不能被触发)。
二、解决办法
最简单,是实用,又不用增加其他代码量的方法就是将Click点击事件替换成touchend事件替换。例如:
$("#save_and_back").on("touchend",function(e){ save_article(article_data).then(function(res){ location.href = "home.html"; }); e.preventDefault(); });
这样子就在移动端上很完美地解决了,没有了点透情况。但是,尼玛,PC端上又不兼容了。
突发奇想下,能不能同时绑定click和touchend事件,这样是不是就完美的解决了。
$("#save_and_back").on("touchend",function(e){ save_article(article_data).then(function(res){ location.href = "home.html"; }); e.preventDefault(); }); $("#save_and_back").on("click",function(e){ save_article(article_data).then(function(res){ location.href = "home.html"; }); e.preventDefault(); });
果然,真的解决了问题。查询一下原因:
事件优先级为: touchstart > touchend > click 。
在PC端上,没有touchend事件,只有click事件被绑定上了。
在移动端上,绑定了touchend和click事件,但是touchend事件优先级比click高,并且阻止了事件继续冒泡。所以两个端上都能完美实现效果,具体还有没有其他的问题暂时不得而知。
0 0
- Zepto Click点透情况解决办法
- Zepto Click点透情况解决办法
- 手机端click事件300ms延迟问题&&zepto.js的点透事件
- 解决关于移动端zepto的tap点透bug(英文ghost click)
- zepto点透研究
- zepto tap “点透”研究 (转)
- zepto tap “点透”研究 (转)
- zepto tap “点透”的解决
- Zepto tap事件“穿透”、“点透”问题研究
- zepto之tap事件点透问题分析及解决方案
- zepto.js使用注意点
- zepto的tap事件的点透问题的几种解决方案
- Zepto 使用中的一些注意点
- Zepto 使用中的一些注意点
- Zepto 使用中的一些注意点(kimi)
- Zepto 使用中的一些注意点
- Zepto 使用中的一些注意点
- Zepto 使用中的一些注意点
- spring in action读书笔记
- opencv2.4.9在visual studio 2013中的配置
- The 13th Zhejiang Provincial Collegiate Programming Contest - K Highway Project
- Exchange Server 2013 一步步安装图解
- redis安装make失败
- Zepto Click点透情况解决办法
- Maven建项目时的一些常用配置
- 红黑树原理和算法详细介绍
- ios动态下载多种中文字体
- 重建 MBR
- 字典转模型
- Android开发新工具Android Studio相关知识
- ios打包ipa的四种方法
- Java中的main方法