标签：

今天在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.欢迎交流

移动开发那些坑之——safari mobile click事件的冒泡bug

标签：

原文地址：http://www.cnblogs.com/youryida/p/4892912.html