触发点透事件的缘由:
因为两个div重合,例如:一个div调用show(),一个div调用hide(),这个时候当点击上层的div($up)的时候就会影响到下层的那个div($down),使其也触发相应的事件。ios
解决办法:
(1)
github上fastclick库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,因而你也能够按照AMD规范,用诸如require.js的模块加载器引入),而且在dom ready时初始化在body上,如:git
$(function(){github
new FastClick(document.body);npm
})浏览器
而后给须要“无延迟点击”的元素绑定click事件(注意再也不是绑定zepto的tap事件)便可。
固然,你也能够不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击
进一步,对于zepto,若是你打算继续使用它,那么它的tap相关事件已经没有用了,咱们能够本身build一个无“touch”模块的zepto,以便减少zepto文件的大小和提升运行效率。zepto的github页面有定制化模块的方法,见https://github.com/madrobby/zepto的building部分。dom
例:npm install fastclick后引入ide
(2)ui
思路是优先触发上层事件,让上层事件快于下层事件的触发,并阻止默认事件。事件
1.一个优先于下面的捕获的事件
2.而且经过这个事件阻止掉默认行为(下面的对click事件的捕获,在ios的safari,click的捕获被认为和滚屏、点击输入框弹起键盘等同样,是一种浏览器默认行为,便可以被event.preventDefault()阻止的行为)。
例如,将tap事件改成touchend,这样就直接在上层元素被捕获,而不是在body上才被捕获了,知足了1;再在内部使用preventDefault()解决了2,代码以下:ip
$up.on('touchend',function(e){ // 改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom自己上就会被捕获触发
$up.hide() ;
e.preventDefault(); // 阻止“默认行为”
})
(3)
延迟必定的时间(300ms+)来处理事件
$("#test").on("tap", function (event) {
setTimeout(function(){
//本身想作的操做
},320);
});