0

HTML

<b class="ke">some text <b class="x">x</b></b>

Javascript

function key_tag_click() {
    $('.ke').not('.x').unbind().bind('click', function () {
        console.log('.ke');
        $(this).unbind();
        $(this).children('.x').show();
        x_click();
    });
    return;
}

function x_click() {
    $('.x').unbind().bind('click', function () {
        console.log('.x');
        $(this).unbind();
        $(this).hide();
        key_tag_click();
    });
    return;
}

key_tag_click();
  1. 最初に.keをクリックします

コンソールログ

ケ

  1. 次に、.xをクリックします

コンソールログ

バツ

ケ

どうして？？.keクリックイベントをトリガーしているのは何ですか? この時点で .key はバインドされていません!

4

3 に答える 3

1

要素をクリックすると、最初にその要素でイベントがトリガーされ、次にその要素の親、次にその要素の親というようにドキュメントまで続きます。そのため、.x をクリックすると、.ke のクリック ハンドラもトリガーされます。これを防ぐには、false を返すか、伝播を停止するか、クリック要素がイベント ターゲットであることを確認します。

オプション 1:

$('.x').unbind("click").bind('click', function (e) {
    e.stopPropagation();

オプション 2:

$('.ke').unbind().bind('click', function (e) {
    if (this !== e.target) return;
    console.log('.ke');

オプション 3:

$('.x').unbind("click").bind('click', function () {
    ... code ...
    return false;
});
于 2013-08-28T20:25:30.070 に答える
1

理由はイベントバブリング`. 要素をクリックすると、クリック イベントは親要素、その親などにも送信されます。

x_click()が最後に呼び出されるためkey_tag_click()、イベントは に再度バインドされ.keます。これが戻った後、イベントが.ke要素に送信され、このハンドラーが実行されます。

イベントのバブリングを防ぐには、ハンドラーでstopPropagation()またはを呼び出す必要がありますreturn false。

于 2013-08-28T20:26:30.670 に答える
0

コードは次のようになります-

    function key_tag_click() {
        $('.ke').unbind().bind('click', function () {
        console.log('.ke');
        $(this).unbind();
        $(this).children('.x').show();
        x_click();
    });
    return;
    }

    function x_click() {
        $('.x').unbind().bind('click', function () {
        console.log('.x');
        $(this).unbind();
        $(this).hide();
        key_tag_click();
        return false; // return a false to prevent the handler from propagating the
                      //to parent element and thus preventing x from being displayed.
    });
   return ; 
  }

key_tag_click();

ソース: http://api.jquery.com/event.stopPropagation/

于 2013-08-28T21:04:12.407 に答える