stopPropagation和live()方法.我错过了什么？

Question

我已经阅读了jQuery doc,我知道如果我使用live()将事件绑定到元素上,使用stopPropagation()是没有意义的,因为带有live()的事件绑定到文档节点,因此事件已经被激活了.这么说,我认为nex代码会提醒3次,因为stopPropagation不会停止任何事情:

<ul style="border:red solid 1px;">
    <li style="padding:10px; border:blue solid 1px;">
        <p style="border:green solid 1px;"><a href="#">link</a></p>
    </li>
    <li style="padding:10px; border:blue solid 1px;">
        <p style="border:green solid 1px;">no link</p>
    </li>
</ul>

<script type="text/javascript">
    $('a').live( "click", function( e ) {alert("link");e.stopPropagation()} );
    $('ul').live( "click", function( e ) {alert("ul");} );
    $('ul li').live( "click", function( e ) {alert("li");} );
</script>

当我点击链接时我预期并提醒"li"和"ul",但是当它应该是没用的时候,stopPropagation会停止其他事件.我错过了什么？

Answer 1

根据文档 stopPropagation()不能live()按预期工作,live()只有在事件已经冒泡到之后才执行事件document.

但是,如果您正在使用jQuery 1.4.3或更高版本stopPropagation()开始工作.

live()自1.4.3以来被重写了好几次.
该live()文档列出了为什么使用其他绑定方法而不是首选的许多原因.虽然文档中的信息似乎是指1.4.1行为,但似乎与实际的当前行为并不是100%同步.

例如,查看添加on()它的1.7.1源显示live()正在使用on():

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

演示 - 使用您的代码并使用jQuery 1.4.1 - stopPropagation无法正常工作

演示 - 使用您的代码并生活在jQuery 1.4.3中 - stopPropagation现在正在运行

摘要

live()在1.4.3中重写了.我假设由于delegate()已被添加.
live()随着改进的增加,jQuery的每个版本都在不断更新.

一般来说为了防止出现任何令人惊讶的结果,live()最好遵循文档中的指导原则并对给定版本的jQuery使用建议的方法:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

为了完整性,我在下面添加了live()1.4.1和1.4.3 的源提取.

1.4.1来源

live: {
    add: function(proxy, data, namespaces, live) {
        jQuery.extend(proxy, data || {});

        proxy.guid += data.selector + data.live;
        data.liveProxy = proxy;

        jQuery.event.add(this, data.live, liveHandler, data);

    },

    remove: function(namespaces) {
        if (namespaces.length) {
            var remove = 0,
                name = new RegExp("(^|\\.)" + namespaces[0] + "(\\.|$)");

            jQuery.each((jQuery.data(this, "events").live || {}), function() {
                if (name.test(this.type)) {
                    remove++;
                }
            });

            if (remove < 1) {
                jQuery.event.remove(this, namespaces[0], liveHandler);
            }
        }
    },
    special: {}
}

1.4.3来源

live: {
    add: function(handleObj) {
        jQuery.event.add(this, liveConvert(handleObj.origType, handleObj.selector), jQuery.extend({}, handleObj, {
            handler: liveHandler,
            guid: handleObj.handler.guid
        }));
    },

    remove: function(handleObj) {
        jQuery.event.remove(this, liveConvert(handleObj.origType, handleObj.selector), handleObj);
    }
}