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

今天在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/（推荐）
备注：这里最好经过js动态判断是ios再加此样式；若是都加上，那Android设备会出现点击屏幕全屏出现浅蓝色或浅红色<a>触感反馈的样式遮罩。

方案2.
使用zepto.js的1.0rc1版本的tap事件——没有仔细看文档，经我测试V1.0-1.1.6等等这几个版本都很差使（tap有一个很傻比的地方，你摁住慢慢滚屏的时候，tap会触发，其实只是在滚屏，可是它彷佛模拟click的时候没有去判断start和end的偏移范围）

3.欢迎交流