6

私はjQuery docを読みましたが、live()を使用してイベントを要素にバインドする場合、stopPropagation()を使用しても意味がないことを知っています.live()を使用したイベントはドキュメントノードにバインドされるため、イベントはすでに発生しています。そうは言っても、stopPropagation は何も停止しないため、nex コードは 3 回警告するだろうと考えました。

<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 は役に立たないはずの他のイベントを停止しています。私は何が欠けていますか？

4

1 に答える 1

6

ドキュメント によると、イベントstopPropagation()がすでに.live()live()document

ただし、jQuery 1.4.3 以降を使用している場合はstopPropagation()動作を開始しました。

live()1.4.3以降、何度か書き直されました。
ドキュメントには、live()代わりに他のバインド方法を使用することが推奨される多くの理由がリストされています。ドキュメントの情報は 1.4.1 の動作に言及しているようですが、実際の現在の動作と 100% 同期しているようには見えません。

たとえば、追加された 1.7.1 ソースを見ると、次のものが使用されon()ています。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);
    }
}
于 2012-12-19T09:57:55.940 に答える