当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案:

1.使用github上有一个叫做fastclick的库;

2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡;

3.使用css3的pointer-events=true,pointer-events=none切换来实现;

4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,个人感觉良好;

Zepto tap 穿透bug的更多相关文章

  1. Zepto tap 穿透bug、解决移动端点击穿透问题

    当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡 ...

  2. tap穿透之zepto的bug

    一.什么是zepto tap事件穿透?tap事件穿透就是,页面和弹框上都有绑定点击事件,最上层的弹框绑定了tap事件,下层的页面绑定了click事件,在执行完上层事件后会紧接着触发下层事件,进而出现事 ...

  3. 点击穿透bug · Jaywii

    微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...

  4. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  5. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  6. 手机端 zepto tap事件穿透

    什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...

  7. zepto中的tap穿透

    有一个项目,浮层上是有点击的按钮,但是用tap就会穿透,触发浮层下的页面的点击事件.后来问同事和经过自己尝试,发现用click就可以解决这个问题.

  8. 周记7——ios中picker滑动穿透bug

    Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...

  9. chrome 55 zepto tap事件出错?

    刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...

随机推荐

  1. 【opencv】图片标注文字

    IplImage* pstImg; HI_CHAR as8Title[25];CvFont stTimeFont;//字体信息cvInitFont(&stTimeFont,CV_FONT_HE ...

  2. HDU 4320 Arcane Numbers 1 (质因子分解)

    题目:传送门. 题意:将一个A进制下的有限小数转化为B进制看是否仍为有限小数. 题解:一个A进制的小数可以下次 左移动n位变成A进制整数然后再将其转化为B进制即可 即B^m/A^n要整除,因此A的质因 ...

  3. Oracle基础函数

    --1,大小写控制函数 SELECT LOWER('Hello World') 转小写, UPPER('Hello World') 转大写, INITCAP('hello world') 首字母大写 ...

  4. php dirname($path) 中文路径不对问题

    将$path中的\改为/ $dir=__FILE__;$dir = str_replace("\\","/", $dir);$dir=dirname($dir) ...

  5. 使用cocoapods导入第三方类库后 头文件没有代码提示?

    选择Target -> Build Settings 菜单,找到\”User Header Search Paths\”设置项 新增一个值"${SRCROOT}",并且选择\ ...

  6. java删除被占用的文件

    boolean result = f.delete();//判断是否删除完毕 if(!result) { System.gc();//系统进行资源强制回收 f.delete; }

  7. Maven 在sts不会自动下载包的问题

    1.查看maven配置setting.xml是否有设置远程仓库 2.sts是否正确配置指定了setting.xml 3.是否开启线上下载,如下图

  8. WebService - 怎样提高WebService性能 大数据量网络传输处理

    直接返回DataSet对象 返回DataSet对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用 ...

  9. 【翻译六】java-连接和实例

    Joins The join method allows one thread to wait for the completion of another. If t is a Thread obje ...

  10. [LeetCode] Longest Consecutive Sequence

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...