在用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下.

我就想知道为什么第一种的绑定方式为什么不行.欢迎提出看法