阻止事件冒泡和使用live()方法。我失去了什么？

Question

阻止事件冒泡和使用live()方法。我失去了什么？

6

我已经阅读了jQuery文档，我知道如果我使用live()将事件绑定到元素上，使用stopPropagation()没有任何意义，因为live()绑定到文档节点的事件已经传播了。所以，我想下面的代码会触发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却阻止了其他事件的执行，尽管它本应该是无用的。我漏掉了什么？

- Barleby

为什么不直接使用 $('a').on( "click", function() {alert("link"); return false;} );？ - Morpheus

如果我点击精确链接，您的代码按预期工作。我看不到ul和li警报。如果我点击实际链接旁边的空格，我会看到另外两个警报。您可能希望为元素设置宽度，以便不会出现此行为。 - Ravi Y

似乎是因为对于ul和ul li，您也使用了live。如果将它们更改为bind，它们都会被调用。 - Andy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

根据文档，stopPropagation()在live()中无法按预期工作，因为live()仅在事件冒泡到document后才执行该事件。

但是，如果您使用的是jQuery 1.4.3或更高版本，则stopPropagation()开始起作用。

自1.4.3以来，live()已经重写了多次。
live()文档列出了许多原因，说明为什么使用其他绑定方法比较好。不过，文档中的信息似乎是针对1.4.1行为的，并且与实际当前行为不完全同步。

例如，查看添加了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()。
随着每个jQuery版本的改进，live()一直在不断更新。

一般来说，为了避免使用live()时出现任何意外的结果，请遵循文档中的指南，并使用给定版本的建议方法：

$(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+

为了完整性，我在下面添加了1.4.1和1.4.3版本的live()源代码提取。

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 source

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);
    }
}