zepto之tap点透处理

现象原因

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选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

解决办法:

用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

设置点击事件为_tap

_tap = touchend in document ? "touchend":"click"

这样在执行的过程中就可以直接调用div.on(_tap, function(){})

时间: 2024-10-26 14:30:53

zepto之tap点透处理的相关文章

zepto的tap事件的点透问题的几种解决方案

zepto的tap事件的点透问题的几种解决方案 zepto的tap事件点透问题分析: 1.“点透”是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 在前面的项目中遇到了如下图的问题:在点击弹出来的选择组件的右上角完成后会让完成后面的input输入框聚焦,弹出输入键盘,也就是点透了 2.为什么会出现点透呢?这个需要从zepto(或者jqm)源码里面看关于tap的

zepto之tap事件点透问题分析及解决方案

点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就会出现点透的现象. 点透现象出现的原因: zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,并且tap事件是冒泡到document上触发的!!! 在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchsta

zepto的tap事件的穿透分析

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取焦点). 原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手

<转>【读fastclick源码有感】彻底解决tap“点透”,提升移动端点击响应速度

[读fastclick源码有感]彻底解决tap“点透”,提升移动端点击响应速度 前言 读fastclick源码 绑定事件 stopImmediatePropagation 测试入口 帮助理解的图 为什么zepto会点透/fastclick如何解决点透 后记 结语 申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话我们就抛弃了ie用户当然可以做兼容,

彻底解决TAP(点透)提升移动端点击响应速度

使用fastclick 尼玛使用太简单了,直接一句: FastClick.attach(document.body); 于是所有的click响应速度直接提升,刚刚的!什么input获取焦点的问题也解决了!!!尼玛如果真的可以的话,原来改页面的同事肯定会啃了我 一步步来,我们跟进去,入口就是attach方法: FastClick.attach = function(layer) { 'use strict'; return new FastClick(layer); }; 这个兄弟不过实例化了下代

fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟:另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题.那么他们有什么区别呢? 先看zepto的touch模块实现: 1 $(document) 2 .on('touchstart ...',function(e){

mui和zepto的tap事件

zepto.js和mui一起使用的时候,tap事件会发生两次,这时只要不引用zepto.js的touch.js就可以了,只用mui的tap事件转自[B5教程网]:http://www.bcty365.com/content-146-5131-1.html 1.zepto.js和mui一起使用的时候,tap事件会发生两次,这时只要不引用zepto.js的touch.js就可以了,只用mui的tap事件,如:mui(".infor_header").on('tap','li',functi

响应式基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小

移动web基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小