今天在iphone6 plus的safari上测试这么一段代码:
<script> $(document).on(‘click‘,‘.callApp‘, function() { alert("hehe"); }) </script> <div class="callApp caMiddle">打开app,马上参加活动</div> <a href="javascript:;" class="callApp caMiddle">打开app,马上参加活动</a> <img src="http://news.baidu.com/resource/img/logo_news.gif" alt="test" class="callApp">
发现,点击<img>和<a>是可以触发事件的,但是点击<div>无效。
1.起初,我以为是引用的zepto的问题,后来用了jquery之后,发现也是这个表现,并且,PC和Android设备都没有问题,唯独ios的safari无法触发事件。
2.我把click事件换成touchstart之后,事件又都可以触发了。
怪异。
3.难道是事件代理Safari不支持?我尝试去掉代理直接注册事件,测试发现,ok了。
4.那,我把事件代理到body下面的某一个div容器上,继续测试,发现也是ok的。
5.难道是safari事件冒泡,没有冒到document上来?测试下面一段代码:
document.addEventListener("click",function(e){ alert(e.target.tagName) },false)
5.果然,还是跟最开始的现象一样,点击<img>和<a>是可以触发,点击<div>无效
6.google了一下,果然这个万恶的safari是有bug的,我英文不好,大家可以去看下这个http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
解决方案
1.添加样式body{cursor:pointer}——我也不知道为什么,参见http://stackoverflow.com/questions/10165141/
2.使用zepto.js的1.0rc1版本的tap事件——没有仔细看文档,经我测试V1.0-1.1.6等等这几个版本都不好使
3.欢迎交流
时间: 2024-10-13 16:29:27