特定要素以外をクリックしたときにイベントを発生させる方法

特定要素を除く画面のどこかをクリックしたときにイベントを発生させるスクリプトを作成してみました。ちょっとしたメニューを作成するときなどにどうぞ。

サンプル

サンプルを実行すると、画面の中央に半透明の要素が現れます。この要素の中以外をクリックした時だけ、要素が消えます。

コード

const somewhereClick = {
	element:null,
	callback:null,
	handleEvent(ev) {
		if (!this.element) {
			document.removeEventListener(this);
			return;
		}
		let flag = 0;
		ev.path.forEach(c => flag = (c == this.element) ? 1 : flag);
		if (flag) return;
		document.removeEventListener("click", this, true);
		this.callback();
		this.element = this.callback = null;
	},
	set(_element, _callback = () => {}) {
		if(!_element || !_element instanceof Node) throw new Error("Invalid Node.");
		this.element = _element;
		this.callback = _callback;
		document.addEventListener("click", this, true);
	}
};

使用方法

somewhereClick.set(Node, callback);

• Node: イベントを無視する要素
• callback: Node以外でイベント発生時のコールバック関数