jQueryのoff()を使ってみる

jQueryのoff()をあまり使ったことがなかったので試してみました。

サンプルコード

まずは特に設定もせずに普通に使ってみます。

HTML

<a href="https://cly7796.net/blog/" id="homelink">cly7796.netへのリンク</a>
<br /><br />
<button id="off">off()でリンク阻止の解除</button>

JavaScript

$(function() {
	$('#homelink').on('click', function() {
		alert('return falseでリンク阻止');
		return false;
	});
	$('#off').on('click', function() {
		$('#homelink').off();
		alert('リンク阻止の解除');
	});
});

アクセス時にはリンク先に遷移できませんが、off()で解除後はページ遷移するようになりました。
off()のデモページ
　

サンプルコード2

off()に特に設定をしないと、指定した要素のイベントを全て解除してしまいます。
特定のイベントのみを解除したい場合は、そのイベントを指定することで解除できます。

HTML

<a href="https://cly7796.net/blog/" id="homelink">cly7796.netへのリンク</a>
<br /><br />
<button id="off">off()でイベントをすべて解除</button>
<button id="off2">off()でclickのみ解除</button>

JavaScript

$(function() {
	$('#homelink').on({
		'click': function() {
			alert('return falseでリンク阻止');
			return false;
		},
		'mouseover': function() {
			$('#homelink').css({
				opacity: 0.5
			});
		},
		'mouseout': function() {
			$('#homelink').css({
				opacity: 1
			});
		}
	});

	$('#off').on('click', function() {
		$('#homelink').off();
		alert('イベントをすべて解除');
	});
	$('#off2').on('click', function() {
		$('#homelink').off('click');
		alert('clickイベントを解除');
	});
});

clickイベントだけ解除して、オンマウス時の処理はそのまま残っています。
指定したイベントのみ解除するoff()のデモページ
　

サンプルコード3

上記では異なるイベントでしたが、同じイベントが複数設定されていることもあります。
そうした場合、イベントを指定しただけでは全てのイベントが解除されてしまいます。

HTML

<button id="button">複数のclickイベントが設定されたボタン</button>
<br /><br />
<button id="off">off()でclickのみ解除</button>

JavaScript

$(function() {
	$('#button').on('click', function() {
		alert('click A');
	});
	$('#button').on('click', function() {
		alert('click B');
	});
	$('#button').on('click', function() {
		alert('click C');
	});

	$('#off').on('click', function() {
		$('#button').off('click');
		alert('clickイベントを解除');
	});
});

同じイベントが全て解除される場合のデモページ
　

こうした場合、イベントに対してNamespaceを指定することで、特定のイベントだけ解除できます。
Namespaceとは、処理に名前を付けることで衝突の可能性を低減し、処理の参照を容易にする方法です。

HTML

<button id="button">複数のclickイベントが設定されたボタン</button>
<br /><br />
<button id="off">off()で2番目のclickのみ解除</button>

JavaScript

$(function() {
	$('#button').on('click.click_A', function() {
		alert('click A');
	});
	$('#button').on('click.click_B', function() {
		alert('click B');
	});
	$('#button').on('click.click_C', function() {
		alert('click C');
	});

	$('#off').on('click', function() {
		$('#button').off('click.click_B');
		alert('2番目のclickイベントを解除');
	});
});

各clickイベントにNamespaceを指定して、イベントを解除する際にNamespaceを参照することで特定のイベントのみ解除しました。
指定したイベントのみ解除するデモページ
　

【参考サイト】

• jQuery の on() と off() を理解する – tacamy.blog
• jQueryのoff()を使いこなす – to-R