2

別の要素がクリックされた後、関数に本体のクリックを割り当てようとしています。これは私が使用しているコードです:

$('#myButton').click(function() {
  $('body').on('click', closePopup);
});

closePopup = function() {
    console.log('closePopup fired');
    $('body').off('click', closePopup);
};

望ましい結果は、myButton のクリック後にのみ closePopup がボディに割り当てられることです。しかし、myButton がクリックされるとすぐに closePopup が起動されます。なぜこうなった？

4

1 に答える 1

6

これは、イベントがバブルするために発生します。イベント ハンドラーがボタンのイベントの処理を終了すると、イベントは本体に到達し、そこで本体が処理します。これを防ぐには、ボタンのクリック時にイベントの伝播を停止します。

$('#myButton').click(function(e) {
  e.stopPropagation();
  $('body').on('click', closePopup);
});
...

ただし、ボタンを複数回クリックすると、複数のイベントがバインドされることに注意してください。もう少し変更することで修正できます。

$('#myButton').click(function(e) {
  e.stopPropagation();
  $('body').off('click', closePopup).on('click', closePopup);
});
...
于 2013-01-21T21:36:17.513 に答える