【jQuery】要素の”外側”のクリックイベントを捕捉「skOuterClick」



jQueryでダイアログボックスのような機能を開発していたとき、ふと「ある要素”以外”」にクリックイベントハンドラを仕掛けられたらいいのにと思いました。

そんな思いでプラグインを探していたところ、kawama.jpさんの記事 jqueryで指定要素”以外”のクリックイベントを実装するouterClickプラグイン にたどり着きました。

残念なことに現在は肝心のプラグインが公開されておらず、リンク切れになってしまっている模様です。ほかを探してみましたが、探し方が悪いのか一向に見つからず…。

ということで、outerClickプラグインのスコブト版、その名も「skOuterClick」を作りました!


ダウンロード

jquery.skOuterClick :Github こちらに公開しました。

ここを右クリックして「名前をつけて保存」 でダウンロードできます。

デモ

「ボックスを表示」ボタンをクリックしてみて下さい。

私をクリックしても、私は消えません( ・`ω・´)
どこでもよいので、私の”外側”をクリックすると、私は消えます(´・ω・`)

使い方

使い方は非常にシンプルです。本家「outerClick」のように”完全なイベント”として扱うことはできませんが、次のように記述することができます。

・アラートを表示する例

1
2
3
4
5
$(function() {
  $('#example').skOuterClick(function() {
    alert($(this).attr('id') + 'の外側がクリックされました!');
  });
});

上記「アラートを表示する例」では、id”example”が設定された要素の外側がクリックされると「exampleの外側がクリックされました!」というメッセージが表示されます。

・デモのコード

1
2
3
4
5
6
7
8
9
10
$(function() {
  $('button#demo_show').click(function(event) {
    event.stopPropagation();
    var offset = $(this).offset();
    $('#demo_box').css({'top': offset.top - 50, 'left': offset.left}).show();
  });
  $('div#demo_box').skOuterClick(function() {
    $(this).hide();
  });
});

上記「デモのコード」を応用すれば、ダイアログボックスや写真のポップアップなどを表示し、直感的な操作(外側をクリック)で閉じる、ということが簡単に出来ます。

またこのプラグインは、クリックイベントのバブリングに影響を与えません。つまり、他のプラグインやスクリプトとの干渉による不具合が出にくくなっているので、安心してお使いいただけます。

私の気まぐれで作成したプラグインですので、サポートを保証することはできませんが、不具合がございましたらコメント欄にてご連絡いただけましたら幸いです。

以上です。

– 追記 –

コメントシステムを切り替える前に、以下のご質問をいただいていたのでこちらで回答致します。

例で言う
$(‘div#demo_box’).skOuterClick(~
のセレクター部分、div#demo_boxを複数指定するにはどうすればいいでしょうか?
ここはクリックしても大丈夫(処理されないよ~)という場所が2つ以上欲しいのです。

内側の要素として扱いたい jQuery オブジェクトを、第2引数以降に指定すればOKです。

$(function() {
	var showDialog = $('#showDialog'); // ダイアログ表示ボタン
	var andMore = $('#andMore'); // なんかもうひとつ内側にしたい要素
 
	showDialog.click(function(e) {
		e.stopPropagation();
		$('#dialog').show();
	});
 
	$('#dialog').skOuterClick(function() {
		$(this).hide();
	}, showDialog, andMore);  // 第2引数以降は「内側の要素」として扱われます。
});

Posted in: Javascript, Web

  • tarou

    素晴らしいプラグインです!
    今やりたいことがこれで出来そうです。
    例で言う
    $(‘div#demo_box’).skOuterClick(~
    のセレクター部分、div#demo_boxを複数指定するにはどうすればいいでしょうか?
    ここはクリックしても大丈夫(処理されないよ~)という場所が2つ以上欲しいのです。
    お忙しいとは思いますが、宜しく御願いします。

    • http://sukobuto.com sukobuto

      遅くなって申し訳ございません!

      内側の要素として扱いたい jQuery オブジェクトを第二引数に渡して下さい。

      	var showDialog = $('#showDialog'); // ダイアログ表示ボタン
      	var andMore = $('#andMore'); // なんかもうひとつ内側にしたい要素
       
      	showDialog.click(function(e) {
      		e.stopPropagation();
      		$('#dialog').show();
      	});
       
      	$('#dialog').skOuterClick(function() {
      		$(this).hide();
      	}, showDialog, andMore);  // 第2引数以降は「内側の要素」として扱われます。
  • hayashi

    初めまして。
    こちらのjquery.skOuterClick.jsをぜひ使わせて頂きたいのですが、ライセンスフリーとありますが、どのラインセンスにあたるでしょうか。(MIT GPLなど・・)
    また、商用利用は可能でしょうか。
    よろしくお願い致します。

    • Kenta Suzuki

      初めまして。コメントありがとうございます!
      こちらライセンスを明記していなかったため、改めて Github に登録いたしました。

      https://github.com/sukobuto/jquery.skOuterClick

      ライセンスは MIT LICENCE です。
      商用利用も可能ですのでどうぞお使い下さい。

      • hayashi

        ご返信、ご対応ありがとうございます!

        商用利用可能とのことで、早速使用させて頂きます。
        とても、わかりやすい記事で勉強になりました。
        今後とも訪問させて頂きます。
        よろしくお願い致します。