Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

範囲外クリックでポップアップを閉じる正しい JQuery

More than 5 years have passed since last update.

ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。しかしこれを実装する時にちょっとした気をつける点があります。

よく見かけて気になっている悪い例

Stackoverflow などでよくある処理としては、クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。もし自分自身だったら stopPropagation()1 して、イベント伝播しなくする。理由としては stopPropagation() しないと、ポップアップそのものをクリックした時に閉じてしまうのを防ぎたいからです。

例えばこういったコードです。

$('#target_element').click(function(event) {  
  event.stopPropagation();  
});

正しいアプローチ

アプローチとしては、クリックイベントを全検知 (ついでに touch device も対応)。もし、そのクリックが自分を含まないものであれば2閉じる処理をするようにします。

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

なぜ悪い例としてあげたのか?

安易に stopPropagation() するべきではないのかということなのですが、https://css-tricks.com/dangers-stopping-event-propagation/ に詳しく解説があります。かいつまむと、

In the "How to detect a click outside of an element?" example above, the purpose of calling stopPropagation isn't to get rid of the click event altogether, it's to avoid running some other code on the page.

「stopPropagation が、クリックイベント自体を取り除くだけではなく、なにか他のコードが実行されることを妨げている効果も持もたらす。」
例えば、ポップアップがオープンな時に、他のクリックイベントを検知して動作するボタンをクリックしても、クリックイベントが伝わらないようなことが起こりえます。

To avoid bugs, it's almost always best to leave events alone and let them propagate as the browser intended.

「イベント自体はそのまま発生させて、ブラウザが意図したようにイベントを伝播させたほうがこのましい。」


※本投稿は http://d.hatena.ne.jp/mabots/20151120/1448003977Coubic Advent Calendar 2015 に向けて、加筆・再編したものです。


  1. stopPropagation()、preventDefault()、return false 各々についてわかりやすいのは http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c 

  2. こちらも参照 https://api.jquery.com/closest/ 

mabots
知のレバレッジを最大化せよ、の人です
http://d.hatena.ne.jp/mabots/
coubic
人々の生活から、「めんどくさい」をなくす。
https://coubic.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away