プラカンブログSTAFF BLOG

2016.11.15

jQueryで特定の要素以外をクリックしたらポップアップを閉じる方法。

こんにちは。デザイナーのSUZUKIです。

ポップアップやメニューを動きをつけて表示させることが多いのですが、
非表示にするときは「閉じる」ボタンで対応していました。
ただユーザビリティを考えると範囲外をクリックしただけで閉じてほしいものですよね。

そこで今回は特定の要素以外をクリックしたら
表示していたポップアップなどを閉じるjQueryの実装方法を紹介します。

調べたところ、2つの方法が見つかりました。

  • stopPropagationを使った方法
  • e.targetでイベントが発生した要素を取得する方法

ただ「stopPropagationを使った方法」はあまりおススメできません。
「e.targetでイベントが発生した要素を取得する方法」を使うことをおススメします。

それではオススメできない理由も含め、2つの方法を説明します。

stopPropagationを使った方法

実際のJSの記述は下記になります。

$('特定の要素のクラス').click(function(e) {  
  e.stopPropagation();  
});

この方法は「stopPropagation();」により全てのイベントを停止させてしまいます。
つまり、開いたポップアップの中にある別のボタンをクリックしても、
イベントが実行されなくなる可能性があります。
上記の理由からこの方法はオススメできません。

e.targetでイベントが発生した要素を取得する方法

実際のJSの記述は下記になります。

$(document).on('click',   function(e) {
  if (!$(e.target).closest('特定の要素のクラス').length) {
    // フェードやスライドなどの処理方法を記述;
  }
});

まずe.targetでイベントが発生した要素を取得します。
「closest」でその最も近い親要素を指定し、
そこに特定の要素があるかを「length」で確認しています。
また「!」は否定を意味しています。

つまり、クリックした親要素内に特定の要素がない場合、
フェードやスライドなどの処理方法を実行という方法になります。

「stopPropagation();」の方法を違い、
開いたポップアップの中にある別のイベントにも影響を与えません。

タッチデバイスにも対応する場合は、下記のように「click」だったところを
「click touchend」に変更するだけで対応可能です。

$(document).on('click touchend',   function(e) {
  if (!$(e.target).closest('特定の要素のクラス').length) {
    // 処理方法を記述;
  }
});

まとめ

「stopPropagation();」の方法を使わないようにさえ注意すれば、
実装も簡単で、ユーザビリティも向上するので、
ぜひ試してみてください。

参考リンク

下記サイトは参考にしたサイトになります。
詳しく知りたい方はどうぞ。

http://ithat.me/2016/01/13/jquery-click-outside-the-area-close
http://qiita.com/mabots/items/74c21ebcedf0004f7fb5
http://d.hatena.ne.jp/mabots/20151120/1448003977

この記事は、SUZUKI が書きました。
Webデザイナー募集中
Webデザイナー募集中(東京)ただいま東京事務所ではウェブデザイナーを募集しています!詳しくはこちらをご参照ください。