近日,有个拼图小活动,引用了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. Python MySQLdb 插入数据

    其实python链接MySQL的方法很多,比较常用的是MySQLdb这个模块,由于自己准备往数据库里面插入一条日期数据,在格式化的日期数据的时候一直报错,所以这里简单写了一个往MySQL数据库的插入数 ...

  2. 【转】车和家CEO李想回顾创业20年:站在更高层才能看到低层问题

    明天就要上班了,写一下我创业20年经历的五个楼层,每一层的认知回过头来看都是天壤之别,以及无比的幸运.只有到了更高一层,你才可以更好的看到低楼层的问题.希望对你的工作有所帮助. 一层楼,生为一个普通的 ...

  3. CentOS6.4 添加nginx系统服务

    简介: Nginx安装完成后默认不会注册为系统服务,所以需要手工添加系统服务脚本.在/etc/init.d目录下新建nginx文件,并更改权限其即可. 1.新建nginx文件 1.1.新建文件:vi ...

  4. Rectified/无限流量/KVM/1G内存/亚洲优化/月付3.99刀起/商家首次续费优惠/91yun第600篇博文

    具体配置如下: 1v CPU + 1G 内存 + 10G SSD + 无限流量( 30T ) + 100M 口 + FreeBSD 支持 + 1IPv4 + IPv6 (可工单) + rDNS = 3 ...

  5. Linux内核移植到JZ2440

    一.准备工作:1.Linux内核:Linux2.6.22.6,可从www.kernel.org上下载:2.交叉工具编译链:arm-linux-gcc-3.4.5-glibc-2.3.6:3.yaffs ...

  6. java小程序(课堂作业02)

    1,三种方法计算组合数 ①设计思路:第一种方法就是通过阶乘公式然后运用公式计算出组合数,第二种通过公式推导出cnk=n/(n-k)cnk-1,然后然后从ckk 开始运算到cnk,第三种方法就是通过递归 ...

  7. ALGO-121_蓝桥杯_算法训练_猴子分苹果

    问题描述 秋天到了,n只猴子采摘了一大堆苹果放到山洞里,约定第二天平分.这些猴子很崇拜猴王孙悟空,所以都想给他留一些苹果.第一只猴子悄悄来到山洞,把苹果平均分成n份,把剩下的m个苹果吃了,然后藏起来一 ...

  8. Spring-framework应用程序启动loadtime源码分析笔记(三)——@KafkaListener

    org.springframework.context.annotation.ConfigurationClassParser.getConfigurationClasses()读所有@Configu ...

  9. 学习笔记之HTML 教程 | 菜鸟教程

    HTML 教程 | 菜鸟教程 http://www.runoob.com/html/html-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/try ...

  10. [UE4]旋转小地图

    一.Canvas Panel的旋转原点是Render Transform——>Pivot,Pivot坐标的取值范围是0到1,左上角的pivot坐标是[0,0],右下角的pivot坐标是[1,1] ...