zepto引用touch模块后,click失效
近日,有个拼图小活动,引用了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失效的更多相关文章
- zepto的touch模块解决click延迟300ms问题以及点透问题的详解
大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...
- Zepto.js touch模块深入分析
目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...
- Zepto.js touch模块深入分析 解决手机点击事件
源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...
- 移动端的silder,未封装,基于zepto的touch模块,有参照修改过touch的bug
<!--html模块--> <header class="appoin-head"> <ul> <li class="aa&qu ...
- 读Zepto源码之Touch模块
大家都知道,因为历史原因,移动端上的点击事件会有 300ms 左右的延迟,Zepto 的 touch 模块解决的就是移动端点击延迟的问题,同时也提供了滑动的 swipe 事件. 读 Zepto 源码系 ...
- 移动端touch模块
在自己写touch事件时,总是会出现各种各样的bug,正好发现zepto的touch模块,很好用,而且由于zepto和jquery语法的相似性,这个模块也可以直接引用到jquery中, 得花时间好好消 ...
- Zepto.js touch,tap增加 touch模块深入分析
1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...
- Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
- zepto.js的touch模块
touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...
随机推荐
- jmeter --- 监控器 Plugins (&jconsole)
jmeter --- 监控器 Plugins (&jconsole) Jmeter本身没有监控服务器资源的功能,需要添加额外插件 一.监控原理图 二.Jmeter-Plugs下载和安装 官网上 ...
- Flume 拦截器(interceptor)详解
flume 拦截器(interceptor)1.flume拦截器介绍拦截器是简单的插件式组件,设置在source和channel之间.source接收到的事件event,在写入channel之前,拦截 ...
- mysql程序之mysqld_safe详解
mysqld_safe命令 mysqld_safe是在Unix上启动mysqld服务器的推荐方法.mysqld_safe增加了一些安全特性,例如在发生错误时重新启动服务器,并将运行时信息记录到错误日志 ...
- python 计算校验和
校验和是经常使用的,这里简单的列了一个针对按字节计算累加和的代码片段.其实,这种累加和的计算,将字节翻译为无符号整数和带符号整数,结果是一样的. 使用python计算校验和时记住做截断就可以了. 这里 ...
- ubuntu下安装Pycharm
先在PyCharm官网下载安装包 链接:https://www.jetbrains.com/pycharm/download/#section=linux 下载完成后,解压并安装,安装过程需要认证身份 ...
- phoenix初步
更新系统包管理工具hex mix local.hex 安装phoenix,phoenix是elixir的web框架 mix archive.install https://github.com/pho ...
- 黄聪:FFmpeg 使用指南
1. ffmpeg 是什么? ffmpeg(命令行工具) 是一个快速的音视频转换工具. 2. ffmpeg 的使用方式 命令行: ffmpeg [全局选项] {[输入文件选项] -i ‘输入文件’} ...
- 简单明了区分IE,Firefox,chrome主流浏览器
简单明了判断浏览器Firefox:typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().index ...
- ubuntu更新提示/boot空间不足
1. 查看当前使用的内核版本 uname -a 2.在终端下察看已经安装的旧的内核: ctrl+alt+t——>进入终端——>输入命令: dpkg --get-selections|gre ...
- DS树+图综合练习--带权路径和
题目描述 计算一棵二叉树的带权路径总和,即求赫夫曼树的带权路径和. 已知一棵二叉树的叶子权值,该二叉树的带权案路径和APL等于叶子权值乘于根节点到叶子的分支数,然后求总和.如下图中,叶子都用大写字母表 ...