3

リスト内の「li」要素内のさまざまな要素に対して、さまざまなデリゲートクリックハンドラーを作成しようとしています。例：

<ul id='myList'>
  <li>
    <p>First item.</p>
    <button>button1</button>
    <button>button2</button>
  </li>
  <li>
    <p>Second item.</p>
    <button>button1</button>
    <button>button2</button>
  </li>
</ul>

ユーザーが（任意のアイテムの）button1をクリックすると、そのイベントを取得して、伝播を停止します（button2インスタンスでも同じ）。親li要素をクリックするユーザーは、別のハンドラーになります。

$('#myList').delegate('li', 'click', function() {
    alert("You clicked a parent <li> item!");
});

$('#myList').delegate('button', 'click', function(event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    alert("You clicked a button (but which one?)!");
});

つまり、1つの問題は、button1インスタンスのデリゲートとbutton2インスタンスのデリゲートをどのように設定するかということです。上記の例の2番目のデリゲートは、ボタンがクリックされたときに起動しますが、親liアイテムのハンドラーが呼び出されるため、event.stopPropagation（）は機能しないようです。

- - - アップデート - - - - - - -

また、event.stopImmediatePropagation（）を呼び出そうとしましたが、効果はありませんが、親ハンドラーも呼び出されています。

ありがとうございました

4

4 に答える 4

1

確かに、それは機能するはずであり、私はjQueryコードをステップスルーしようとしましたが、役に立ちませんでした。代わりに、私はこれを作りました：

(function(){
  var el = document.getElementsByTagName("li");
  var i = el.length;

  while (i--)
    el[i].onclick = function () {
      alert("You clicked a parent <li> item!");
    };

  el = document.getElementsByTagName("button");
  i = el.length;

  while (i--)
    el[i].onclick = function (event) {
      var e = event || window.event;

      e.stopPropagation();
      e.cancelBubble = true;
      alert("You clicked a button (but which one?)!");
    };

})();

これは希望どおりに機能します（ただし、IEではテストされていません）。私はこれをさらに調査するのに疲れています、今、おそらく明日。

他の質問に答えるには：どのボタンが呼び出されたかを簡単にテストできるように、実際にidsまたはclassesをsに追加する必要があると思います。<button>

于 2010-06-25T02:49:48.387 に答える
1

多分親で：

$('#myList').delegate('li', 'click', function(event) {
    if (!$(event.target).is('button')) {
        alert("You clicked a parent <li> item!");
    }
});
于 2010-06-25T02:50:32.300 に答える
0

あなたは試すことができevent.stopImmediatePropagation()ます。理論的には、あなたが持っているものはうまくいくはずなので、それを拡張することは役立つかもしれません。

于 2010-06-25T02:26:54.027 に答える
0

その理由は、.delegate（）は、クリックイベントが子要素を介してmyListにバブルダウンした場合にのみ、クリック関数を実行するためです。次に、一致するすべてのデリゲートを実行します。クリックがmyListに到達するまでに、ボタンとLIの両方を通過しているため、例では両方を正しく呼び出しています。

BUTTONの前にLIをバインドしたので、LIデリゲートが呼び出されるリストの最初にあるので、BUTTONのものを最初にバインドするだけで、機能するはずです。

于 2012-11-28T09:29:06.770 に答える