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

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

サンプル

実行する

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

コード

var somewhereClick={
	element:null,
	callback:null,
	handleEvent(ev){
		if(!this.element){
			document.removeEventListener(this);
			return;
		}
		var 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以外でイベント発生時のコールバック関数