注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

zepto tap “点透”研究 (转)  

2013-03-04 15:25:28|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

1
2
3
$(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部分。
经过亲测,这样不会发生“点透”现象

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

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

可以通过截图看到,这个问题已经解决了。

至此,我们的结论是,在使用zepto框架的tap相关方法时,一定要注意,如果绑定tap方法的dom元素在tap方法触发后会隐藏、css3 transfer移走、requestAnimationFrame移走等,而“隐藏、移走”后,它底下同一位置正好有一个dom元素绑定了click的事件、或者有浏览器认为可以被点击有交互反应的dom元素(举例:如input type=text被点击有交互反应是获得焦点并弹起虚拟键盘),则会出现“点透”现象。在这种情况下,我们应当采用上述两种方法来避免“点透”。

  评论这张
 
阅读(7670)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018