什么是事件穿透?

点击上面的一层时会触发下面一层的事件

”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致

现象原因:
zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不 用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

具体解决方案如下:
1)  使用github上有一个叫做fastclick的库来替代Zepto的tap事件;

2)  监听touchend事件,并在事件中使用preventDefault()阻止冒泡;
//JS代码
$(".js-close").on("touchend", function(e){  //这里使用touchstart事件也可以
    e.preventDefault();
    $('.sec_ui_dlg').remove();
    $(".dlg_bg").remove();
});

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

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

5)  如果还不奏效,终极解决方案是用click提代tap;
//设置点击事件为_tap
_tap = touchend in document ? "touchend":"click"  
//这样在执行的过程中就可以直接调用
div.on(_tap, function(){...})

手机端 zepto tap事件穿透的更多相关文章

  1. chrome 55 zepto tap事件出错?

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

  2. 去除手机端触摸滑动事件ontouchmove

    window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...

  3. js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...

  4. 手机端Zepto框架,利用swipejs插件做banner轮播图

    一,HTML部分<div class="banner"> <div id="slider" class="swipe"&g ...

  5. 手机端的click

    一:click事件的封装 手机端的click事件不是太好用, 1.点击会有延迟, 2.会出现一个灰色区域 就想到了用touch事件代替. touch事件有touchstart,touchmove,to ...

  6. JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  7. zepto的tap事件的穿透分析

    首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...

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

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

  9. zepto学习(二)之tap事件以及tap事件点透处理

    前言 为什么通过touch可以触发click事件? touch事件的来源 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown.mouseup.mousemove和click ...

随机推荐

  1. java中关于集合的知识点梳理

    一:概述 1.集合的特点 只存储对象,集合长度是可变的,集合可以存储不同类型的对象. 2.集合框架     Collection    List | | Set ArrayList    Linked ...

  2. JS中数组对象去重

    JS数组去重 JS中对数组去重最好不要用unique方法,该方法主要是对dom节点数组的去重,如果对普通的数组元素去重只会去掉与之相邻的重复元素,也就是如果数组中还有不相邻的重复元素存在,将不会被去掉 ...

  3. 转NodeJS的npm模块版本号 模式解析

    npm 中的模块版本都需要遵循 semver 2.0 的语义化版本规则. 版本格式:主版本号.次版本号.修订号,版本号递增规则如下: 主版本号:当你做了不兼容的API 修改, 次版本号:当你做了向下兼 ...

  4. 常用分类列表wp_list_categories()

    使用: <ul> <?php $args= array( 'depth'=>1, 'orderby'=>id, 'style'=>none ); wp_list_c ...

  5. java编程技巧

    欢迎提出建议指出错误互相交流. 1.统计对象数量,比如统计一共发射了多少颗子弹. public class Bullet { public static int count = 0; public B ...

  6. [LeetCode]题解(python):036-Valid Sudoku

    题目来源 https://leetcode.com/problems/valid-sudoku/ etermine if a Sudoku is valid, according to: Sudoku ...

  7. Java学习-035-JavaWeb_004 -- JSP include 指令

    inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...

  8. POJ2262问题描述

    Goldbach's Conjecture   Description In 1742, Christian Goldbach, a German amateur mathematician, sen ...

  9. preg_match_all

    <meta charset="utf8"> <?php set_time_limit (0); for($i=1;$i<34;$i++){ $url = & ...

  10. Centos php项目发布问题

    LAMP环境,项目运行错误日志路径:/var/log/httpd 错误日志例如: [Sat Jul :: ] [error] [client , referer: http://192.168.100 ...