文档章节

zeptozepto tap “点透”解决办法

leqianlong
 leqianlong
发布于 2014/04/23 22:57
字数 563
阅读 4.2K
收藏 8

点透:

点透主要是由于两个div重合,例如:一个div调用show(),一个div调用hide();这个时候当点击上面的div的时候就会影响到下面的那个div;

解决办法主要有2种:

1.github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如

$(function(){
    new FastClick(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
当然,你也可以不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击
进一步,对于zepto,如果你打算继续使用它,那么它的tap相关事件已经没有用了,我们可以自己build一个无“touch”模块的zepto,以便减小zepto文件的大小和提高运行效率。zepto的github页面有定制化模块的方法,见
https://github.com/madrobby/zepto的building部分。

2.根据分析,如果不引入其它类库,也不想自己按照上述fastclcik的思路再开发一套东西,需要
1.一个优先于下面的“divClickUnder”捕获的事件
2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对click事件的捕获,在ios的safari,click的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被event.preventDefault()阻止的行为)。
如,将tap事件改为touchend(虽然意思肯定不完全一样,而且不够优雅),这样就直接在“divTapAbove”被捕获,而不是在body上才被捕获了,满足了1;再在内部使用preventDefault()解决了2,代码如下:

$divTapAbove.on('touchend',function(e){ // 改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
    $divTapAbove.hide()
    $output.html($output.html() + 'tap<br/>')
    e.preventDefault(); // 阻止“默认行为”
})


    

© 著作权归作者所有

leqianlong
粉丝 5
博文 29
码字总数 6063
作品 0
朝阳
程序员
私信 提问
zepto tap “点透”的解决

触发点透事件的原因: 由于两个div重合,例如:一个div调用show(),一个div调用hide(),这个时候当点击上层的div($up)的时候就会影响到下层的那个div($down),使其也触发相应的事件。 解决办...

尼古拉斯-赵四
2016/05/20
158
0
也来说说touch事件与点击穿透问题

前言 做过移动端H5页面的同学肯定知道,移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章,我想再来回顾下touch事件的原理,为什么通过touch可以触发click事件,touch事...

大灰狼的小绵羊哥哥
2019/01/01
0
0
【读fastclick源码有感】彻底解决tap“点透”,提升移动端点击响应速度

申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样...

Daniel_s
2016/01/27
225
0
从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/12
0
0
移动端WEB开发,click,touch,tap事件浅析

一、click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。 singleTap和doubleTap 分别代表单次点击和双次点击。 二、关于t...

柒月-小妖精
2015/08/03
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

SQL Server中是否有一个Max函数采用两个值,如.NET中的Math.Max?

我想写这样的查询: SELECT o.OrderId, MAX(o.NegotiatedPrice, o.SuggestedPrice)FROM Order o 但这不是MAX函数的工作原理,对吗? 它是一个聚合函数,因此需要一个参数,然后返回所有行的...

技术盛宴
20分钟前
17
0
是否可以编写模板来检查函数的存在?

是否可以编写一个模板来更改行为,具体取决于是否在类上定义了某个成员函数? 这是我要写的一个简单示例: template<class T>std::string optionalToString(T* obj){ if (FUNCTION_EX...

javail
36分钟前
27
0
聊聊artemis的confirmationWindowEnabled

序 本文主要研究一下artemis的confirmationWindowEnabled confirmationWindowEnabled activemq-artemis-2.11.0/artemis-core-client/src/main/java/org/apache/activemq/artemis/core/client......

go4it
今天
82
0
单例模式(饿汉式和懒汉式)

所谓类的单例设计模式,就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例,并且该类只提供一个取得其对象实例的方法。 饿汉式 public class SingletonTest1 { ...

SongAlone
今天
76
0
uni-app学习:4、数据绑定(变量、数组、显示控制)

基本等同与vue,把代码跑一下,看看就明白了。 其中, v-hidden 貌似不管是 true or false 都有显示 v-show 才切换。 和vue 一样,数组循环中要加key绑定,只不过如果不加的话会有警告。 ...

轻轻的走过
今天
69
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部