1分でわかるjQueryとプラグインを使用した要素の外側クリックイベントの取得

要素の外側クリックイベントの取得に必要なもの

まずjQueryとskOuterClickを読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://iwb.jp/s/js/jquery.skOuterClick.js"></script>

そのあとボタンをクリックしたときと要素の外側をクリックしたときの処理を入れる。

ボタンをクリックしたときに外側クリックのイベントが発生しないようにstopPropagation()でイベントの伝播を止める。外側クリックはskOuterClickでイベントを発生させる。

$("button").click(function(e){
	e.stopPropagation();
	$("#s").toggle();
});

$("#s").skOuterClick(function(){
	$(this).hide();
});

以上で外側クリックイベントを取得できる。一般的にはhide()を実行させることが多い。