在用zepto的on事件中遇到的一個奇怪問題.

最近在一個項目運用zepto的on事件綁定,發現與jquery的事件有很大的區別,不知道是不是zepto的問題,

HTML結構如下

<div>
      <ul id="test1">
    <li><a id="test2">11111111</a></li>
      </ul>
</div>

然后給上面的test1 和test2綁定事件,代碼如下

$(document).on("click","#test1",function(){
    alert("點擊了父節點")
});
$(document).on("click","#test2",function(){
    alert("點擊了子節點")
});

此時,我點擊a標簽.理論上應該彈出 alert("點擊了子節點"),alert(彈出了父節點);

可是實際上發現,用zepto的事件綁定的時候卻恰好相反,先彈出了父節點,再彈出子節點,用jquery的事件綁定,一切正常,后來把事件的綁定順序換下,先綁定子節點的再綁定父節點的則正常.

此為第一個感覺很不合理的地方.

 

最坑爹的第二點來了.

此時如果我需要阻止事件冒泡,理論上來說,只需要加上阻止冒泡的方法就行了.代碼如下

$(document).on("click","#test2",function(event){
    alert("點擊了子節點");
    event.stopPropagation();
});
$(document).on("click","#test1",function(){
    alert("點擊了父節點")
});

此時,在jquery下的確沒有任何問題,但是在zepto下則失效.於是只好查看源碼,發現代碼如下

 

  handler.del = getDelegate && getDelegate(fn, event)
        var callback = handler.del || fn
        handler.proxy = function (e) {
            var result = callback.apply(element, [e].concat(e.data))
            //當事件處理函數返回false時，阻止默認操作和冒泡
            if (result === false) e.preventDefault(), e.stopPropagation()
            return result
     }

於是我按照上面的要求修改.代碼如下:

$(document).on("click","#test2",function(event){
    alert("點擊了子節點");
    return false;
});
$(document).on("click","#test1",function(){
    alert("點擊了父節點")
});

發現還是不行.看來zepto與Jquery還是有很大的區別,不知道各位有沒有遇到這個問題,或者知道這個問題的根本原因.當然如果純粹只是為了實現這個功用如下代碼也可以解決

$("#test2").on("click",function(event){
    alert("點擊了子節點");
    return false;
});
$("#test1").on("click",function(){
    alert("點擊了父節點")
});

上面的綁定方式就一切正常 在zepto下.

我就想知道為什么第一種的綁定方式為什么不行.歡迎提出看法