近日,有个拼图小活动,引用了zepto,以及zepto的touch模块。

在拼图结束之后,进行抽奖的活动,该抽奖结果是以弹框展示。

这里的关闭按钮需要添加点击事件:

    $(document.body).on("click", ".modal i", function () {
$(".overlay").css("opacity", 0);
$(".modal").css("opacity", 0).one("webkitTransitionEnd", function () {
$(this).add(".overlay").hide();
});
});

  事件其实很简单,就是点击关闭按钮,遮罩和弹框度关闭。

  使用浏览器模拟,完全正常,效果不存在任何问题。

  但是当使用真机测试的时候,安卓也是没有问题的,iPhone点击无效,依据经验查找问题:

    这里的关闭按钮,不是a标签,所以需要添加属性 cursor:pointer;  -- 查看css样式表,该样式已经添加这一属性。

  这是第一反应,除此之外,确实没有什么原因可以导致ios点击失效,安卓却有效的。

  反复查找代码上可能存在的bug,并翻看zepto的api,最终还是突发奇想,既然click不行,那么就换一个事件呢?换成tap或者touchend?

  结果替换成tap就搞定。不知道什么原因。

  总结一下现象:当完成拼图之后,即使用了zepto当中的swipe事件之后,页面当中所有的click事件在ios端失效。如果不进行swipe事件,click事件正常。

  结论:在移动端使用zepto并且引用其touch模块的话,就使用tap事件代替原本的click事件。

  

    $(document.body).on("tap", ".modal i", function () {
$(".overlay").css("opacity", 0);
$(".modal").css("opacity", 0).one("webkitTransitionEnd", function () {
$(this).add(".overlay").hide();
});
});

  

  

  

zepto引用touch模块后,click失效的更多相关文章

  1. zepto的touch模块解决click延迟300ms问题以及点透问题的详解

    大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...

  2. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  3. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  4. 移动端的silder,未封装,基于zepto的touch模块,有参照修改过touch的bug

    <!--html模块--> <header class="appoin-head"> <ul> <li class="aa&qu ...

  5. 读Zepto源码之Touch模块

    大家都知道,因为历史原因,移动端上的点击事件会有 300ms 左右的延迟,Zepto 的 touch 模块解决的就是移动端点击延迟的问题,同时也提供了滑动的 swipe 事件. 读 Zepto 源码系 ...

  6. 移动端touch模块

    在自己写touch事件时,总是会出现各种各样的bug,正好发现zepto的touch模块,很好用,而且由于zepto和jquery语法的相似性,这个模块也可以直接引用到jquery中, 得花时间好好消 ...

  7. Zepto.js touch,tap增加 touch模块深入分析

    1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...

  8. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  9. zepto.js的touch模块

     touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...

随机推荐

  1. java-环境安装及配置

    需要安装的软件有: 1.Jdk1.8 2.Tomcat8 3.Eclipse Neon 4.Mysql 5.项目导入 1.JDK安装 1.1安装JDK 1.2配置环境变量 高级系统配置: 环境变量: ...

  2. Hive 严格模式与非严格模式

    1. hive严格模式 hive提供了一个严格模式,可以防止用户执行那些可能产生意想不到的不好的效果的查询.即某些查询在严格模式下无法执行.通过设置hive.mapred.mode的值为strict, ...

  3. [转] openwrt关闭调试串口

    转自: http://wiki.wrtnode.com/index.php?title=Release_UART/zh-cn 由于mt7620n只有一个UART lite接口,在原生的OpenWrt中 ...

  4. java小程序(课堂作业03)

    使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 思路:因为静态初始化块只运行一次,是一个很好的记录次数的方法,定义一 ...

  5. Visual Studio 2008(C#)XML注释提取成帮助文档的方法

    Visual Studio 2008(C#)XML注释提取成帮助文档的方法     1.给方法和类添加XML注释 可以手动添加,具体规则可以看MSDN:http://msdn.microsoft.co ...

  6. scp命令拷贝

    文件拷贝,将172.16.1.2中的文件拷贝到本机中 scp root@172.16.1.2:/home/root/others/music/1.mp3 /home/space/music/1.mp3 ...

  7. Office CVE-2017-8570远程代码执行漏洞复现

    实验环境 操作机:Kali Linux IP:172.16.11.2 目标机:windows7 x64 IP:172.16.12.2 实验目的 掌握漏洞的利用方法 实验工具 Metaspliot:它是 ...

  8. 寻找数组中第K大的数

    给定一个数组A,要求找到数组A中第K大的数字.对于这个问题,解决方案有不少,此处我只给出三种: 方法1: 对数组A进行排序,然后遍历一遍就可以找到第K大的数字.该方法的时间复杂度为O(N*logN) ...

  9. 编码知识梳理(UTF-8, Unicode, GBK, X509, ANSI, VIM中编码)

    编码小结 1 初识编码 所谓编码,是信息从一种形式或格式转换为另一种形式的过程. 字符编码,从自然语言的字符的一个集合(如字母表或音节表),到其他东西的一个集合(如号码或电脉冲)的映射 ANSI:wi ...

  10. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...