【jQuery】~以外の要素をクリックまたはタッチ

皆さん、初めまして。
TomoTomoと申します。
ちなみに趣味は、サッカー、バドミントン、釣り、お酒、などなど結構幅広いです。
以後、お見知りおきください!

さてさて、
このたびは、jQueryで指定の要素以外をクリックしたときのイベントを取得するのに少し苦労してしまったので、メモをしておこうと思います。

指定の要素以外というのは、一般的に『.not(),:not()』というやり方で取得できると思うのですが、これがなんでかうまく反応してくれなかったのです。
そこで、他にいいやり方がないか探してみたところ・・・いいのがありました!

早速、コードを書いてみると、

        $(document).click(function(event) {
            if (!$.contains($("#hoge")[0], event.target)) {

            }
        });

という感じになりました。

キモは、

            if (!$.contains($("#hoge")[0], event.target)) {

            }

のところです。
この『.contains()』というメソッドは、引数がDOM要素になってしまうのですが、
第1引数の要素が反応したイベントに含まれているかどうかを判定してくれるようです。
まさかこんな都合のよいメソッドがあるとは・・・。

このやり方は、モーダルウィンドウやポップアップを閉じるときなどに便利ですよ!
もっと詳しく知りたいという方は、参考元のサイトも載せておきますので、こちらも参考にしてみてください。
http://s3pw.com/milestoner/2013/06/jquery-tips-for-closing-popup/

 

ちなみにスマホやタブレットの場合は、イベント取得のところを

.on('click touchstart', function() {
}

とした方が正確に反応してくれますよ!

 

それでは、また!

カテゴリー: html, javascript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*