0

問題を説明するフィドルを次に示します。「html」要素への1つの要素のクリックでjQuery oneバインディングを追加しています。次のクリックまで「1つの」イベントハンドラーが起動するとは思っていませんが、バインディングを追加するクリックで起動します。「one」イベントハンドラーが追加されるより具体的な要素であれば、これは問題にならないようですが、「html」または「body」を要素として使用すると発生します。これは私がやりたいことです。

これは私には意味がありません。最初のクリックで次のクリックに追加され、リンクをクリックしても起動しないと思います。

ちなみに、私の実際の問題はおそらくもっと良い方法で解決できるはずですが、これに出くわして、なぜ期待どおりに機能しないのか不思議に思いました。

コード：

html:

<div id='hello'>hello</div>
<a class="title" href="#">this example</a> is a test​

js:

$(function() {
    $('a.title').click(function() {
        var htmlClickBind = function (e) {
            console.log('clicked on html, e.target = ' + e.target);
            console.log(e.target == '');
            if (!$(e.target).is('a') ) {
                console.log('cleared click event');
            }
            else {
                $('html').one('click', htmlClickBind);
            }
        };

        $('html').one('click', htmlClickBind);
    });
});​
4

1 に答える 1

6

要素のclickイベントはa.target要素にバブルアップし、html（追加されたばかりの）ハンドラーがそれを確認します。

これを防ぐには、ハンドラーで使用event.stopPropgationします（または、を実行します）。a.target clickreturn falsestopPropagationpreventDefault

更新されたコード（コメントを参照）：ライブコピー 

$(function() {
    // Accept the event arg ----v
    $('a.title').click(function(e) {
        // Stop propagation
        e.stopPropagation();
        var htmlClickBind = function (e) {
            console.log('clicked on html, e.target = ' + e.target);
            console.log(e.target == '');
            if (!$(e.target).is('a') ) {
                console.log('cleared click event');
            }
            else {
                $('html').one('click', htmlClickBind);
            }
        };

        $('html').one('click', htmlClickBind);
    });
});​
于 2012-07-12T16:18:20.610 に答える