画面内の特定の要素以外をクリックしたときに処理をする

画面内の特定の要素以外をクリックしたときに処理をする方法をメモ。

サンプルコード

こちらの内容を参考にしています。
#sample1と#sample2以外をクリックした時のみアラートを出すようにしてみます。

HTML

<div id="sample1">
	対象外エリア1<br />
	<span>spanで括っているテキスト</span><br />
	<a href="https://www.google.co.jp/">リンクのテスト1</a>
</div>
<div id="sample2">
	対象外エリア2<br />
	<a href="https://www.google.co.jp/">リンクのテスト2</a>
</div>

<a href="https://www.google.co.jp/">リンクのテスト3</a>

JavaScriptは以下のように記述します。
3行目のif文内で除外する要素を指定します。

JavaScript

$(function() {
	$(document).on('click', function(e) {
		if(!$(e.target).is('#sample1, #sample2')) {
			alert('クリックされました。');
		}
	});
});

これでいけるかと思ったのですが、#sample内のspanや各aタグをクリックした時にも処理が発生していました。
うまくいかなかった場合のデモページ
　

除外する要素に#sample1 span と a を追加します。

JavaScript

$(function() {
	$(document).on('click', function(e) {
		if(!$(e.target).is('#sample1, #sample2, #sample1 span, a')) {
			alert('クリックされました。');
		}
	});
});

これで想定した動作になりました。
うまくいった場合のデモページ

除外する要素は使用状況に応じて適宜変更してください。
　

【参考サイト】

• document selector combinated with not selector – jQuery Forum