移動開發那些坑之——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.歡迎交流