近日,有个拼图小活动,引用了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. Eclipse配置问题

    1.eclipse中通过search打开第二个文件时第一个文件自动关闭问题: 解决方案: window-preferences-general-search找到第一行的一个选项  reuse edit ...

  2. redis String结构

    1. 设置c的过期时间为100s 2. psetex的单位为毫秒 10000毫秒 3. getrange 获得字符的范围 4. getset 先获得旧的值,然后设置新的值 5. 设置多个值 6. 获得 ...

  3. PL/SQL Developer显示中文乱码

    PL/SQL Developer显示中文乱码,可能是oracle客户端和服务器端的编码方式不一样. 解决方法: Select userenv('language') from dual; 设置环境变量 ...

  4. Spring学习之SpringMVC框架快速搭建实现用户登录功能

    引用自:http://blog.csdn.net/qqhjqs/article/details/41683099?utm_source=tuicool&utm_medium=referral  ...

  5. Vivado中ILA的使用

    Vivado中ILA的使用 1.编写RTL代码      其中需要说明的是(* keep = "TRUE" *)语句的意识是保持cnt信号不被综合掉,方便以后的调试,是否可以理解为 ...

  6. Delphi常用API,API函数

    auxGetDevCaps API 获取附属设备容量 auxGetNumDevs API 返回附属设备数量 auxGetVolume API 获取当前卷设置 auxOutMessage API 向输出 ...

  7. Django 模板语法

    模板语法之变量 变量在HTML中的表示:{{var_name}} 变量取值:句点符 "." views: def index(request): import datetime s ...

  8. nvm环境配置

    安装nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm insta ...

  9. [原抄] Potplayer 1.7.2710 快捷键

    对着软件一个一个抄下来的. 打开文件:Ctrl+O[F3] / 简索文件:F12 / 最后文件 Ctrl+Y / 关闭:F4 打开摄像头:Ctrl+J / 打开DVD设备 Ctrl+D 播放.暂停:空 ...

  10. C++11--右值引用(Perfect Forwarding)

    /* * 右值引用 2: Perfect Forwarding */ void foo( boVector arg ); // boVector既有移动构造又有拷贝构造 template< ty ...