MENU

jQueryで領域外をクリックで要素を閉じたりさせる方法2個

デモ

ここ以外をクリックで消えます。

1つ目


$('.elm').on('click', function(e) {
  e.stopPropagation();
});
$(document).on('click', function() {
  $('.elm').fadeOut();
});

この方法は、e.stopPropagation(); により全てのイベントの伝播を止めてしまうので、あまりいい方法とは言えないようです。ポップアップが開いているとき、別のボタンをクリックしてもイベントが取得できなくなってしまいます。

2つ目


$(document).on('click', function(e) {
  if (!$(e.target).closest('.elm').length) {
    $('.elm').fadeOut();
  }
});

e.target でイベントが発生したDOM要素を取得し、その最も近い親要素に .elm がなければ( ! :否定)、.elm をフェードアウトさせるという処理になっています。

参考文献