Hatena::ブログ(Diary)

知のレバレッジを最大化せよ このページをアンテナに追加 RSSフィード Twitter

2015-11-20

自分以外の領域がクリックされたら、ポップアップを閉じるような jQuery の処理例。

ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。

Stackoverflow などでよくある処理としては、

  • クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。
  • もし自分自身だったら stopPropagation() して、イベント伝播しなくする。

という処理があるのですが、若干危険な処理です。理由は後述します。

今回のアプローチとしては

  • クリックイベントを全検知 (ついでに touch device も対応)
  • もし、そのクリックが自分を含まないものであれば *1 閉じる処理をする。

$(document).on('click touchend', function(event) {
  if (!$(event.target).closest('#target').length) {
    // ここに処理;
  }
});

なぜ安易に stopPropagation() するべきではないのか

  • stopPropagation() すると、他の DOM に click が伝播しなくなります。
    • 他の DOM でも click event を検知する必要があるものがあるかもしれません。
      • ポップアップやモーダルが開かれている時にこれらの動作に問題はないのでしょうか
  • stopPropagation() は global に影響する処理なので、一箇所これがあるだけでコードの保守性が大幅に下がってしまう。

詳しくは https://css-tricks.com/dangers-stopping-event-propagation/

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/mabots/20151120/1448003977
スマートフォン解析