9

私はそのようなhtmlを持っています:

<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li>

アンカーをクリックしたときにAJAXリクエストを処理するために、クリックイベントでハンドラーを登録しました：

    $('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (target.is('a')) {
              // if I click on SPAN element following fragment won't execute!


      // do ajax request
    }       
    event.preventDefault();
});

私の質問は次のとおりです。

  • span要素でクリックイベントが発生するのはなぜですか? 結局、クリック イベントを SPAN 要素にバインドしませんでした
  • 前の質問とは別に、SPAN クリック イベントを処理しない場合、ブラウザーはイベント バブリングを使用してアンカーのクリック イベントを発生させると考えました (event.stopPropagation() を呼び出さない場合)。しかし、そのクリックイベントは一度しか発生しないため、うまくいきませんでした

だから今、私はその問題を回避しました。私の解決策は次のとおりです。

    $('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (!target.is('a')) {
      target = target.parent('a')
    } 
            ...
});

それでも、なぜこのように機能するのか、私は興味があります...

ありがとう、

パヴェウ

4

3 に答える 3

12

イベントの currentTarget を使用する必要があります。

$('.addToFriends a').click(function(event){
     event.currentTarget;    
     ...
});
于 2009-05-28T07:38:44.060 に答える
1

いつでも仕様を読むことができます。素敵なチュートリアルもここにあります。

StopPropagationは、SPAN要素とA要素の両方にクリックイベントハンドラーを定義した場合にのみ意味があります。SPANイベントハンドラーでstopPropagationを呼び出すと、Aハンドラーが呼び出されなくなります。これは、デフォルトのバブルフェーズを想定しています。

于 2009-05-28T07:54:21.110 に答える
1

わかりましたが、SPAN をクリックして stopPropagation() メソッドを呼び出すと、そのフォームのコードは機能しません。

$('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (target.is('a')) {
       // do ajax request
       event.stopPropagation();               
       event.preventDefault();
    }

});

それでも、イベントのバブリングに関連するいくつかの重要なポイントが欠けていると思います。

于 2009-05-28T07:43:52.910 に答える