0

次の div とクリック リスナーがあります。

  $('.right-col .modal-container').live('click',function(e) {
       $(this).remove();
       $('.right-col .modal-backdrop').remove();
  });


<div class="modal-container">
    ....some other buttons and html elements inside
</div>

問題は、この modal-container 要素内のボタンをクリックすると、.modal-container でクリック機能もトリガーされることです。このカスケードを回避するにはどうすればよいですか?

4

3 に答える 3

0

Googleで質問のタイトルを書いた後、ここに最初のリンクがあります：http://api.jquery.com/event.stopPropagation/

そして、ここでそれを使用する方法：

$('.right-col .modal-container').on('click',function(e) {
    $(this).remove();
    $('.right-col .modal-backdrop').remove();
}).find('button').click(function(e){ //guessing you have a <button> in the div
     e.stopPropagation();
});
于 2013-09-11T04:15:39.810 に答える
0

このクリック イベントが伝播されたクリックからではなく、この div の直接クリックから発生したことを確認するにはどうすればよいですか

使用するif (this == e.target){

$('.right-col .modal-container').on('click',function(e) {
    if (this == e.target){
       $(this).remove();
       $('.right-col .modal-backdrop').remove();
    }
});

e.targetは、伝播の現在の要素ではなく、直接クリックした要素です。e.currentTargetこれは、イベント キャプチャの場合にも機能します。イベント キャプチャでは、クリックされた要素に到達する前に、最初にコンテナでイベントが発生します。

パフォーマンスを向上stopPropagationさせるには、@Karl-André Gagnon の提案に従って、イベントのバブリングが発生した場合にイベントの伝播を停止することも試してください。

イベントキャプチャとイベントバブリングの違い

于 2013-09-11T04:31:39.140 に答える
0

をターゲットにしたくない場合はdiv.modal-container、代わりに にクリック イベントを登録できます<button>。ボタンのクラス名が であると仮定すると.modal-container、これを試すことができます。

$("button.modal-container").live('click', function(e){
    // your button specific actions here
    // ...

    $(e.target).parents(".modal-container").first().remove();
});
于 2013-09-11T04:38:36.813 に答える