JavaScriptでリンク（aタグ・要素）のクリックを無効にする。void(0)、preventDefaultイベントキャンセル

更新：2016-11-16

JavaScriptでリンクのクリックを無効化する方法。

javascript:void(0)

リンクをクリックしたときにリンク先へ飛ばさずJavaScriptを実行するには、href属性にjavascript:void(0)を書くのが昔からあるスタイル。

<a href="javascript:void(0);" id="jstest">ページトップへ戻る</a>

<script>
document.getElementById("jstest").addEventListener("click", function(){
	//ここに処理を書く
}, false);
</script>

ではjavascript:void(0)を使いたくない場合はどうすれば良いのか。
サイトでよく見かけるページ上部（先頭、トップ）へ戻るリンクは、href属性に#だけを書くと瞬時にページ上部へ移動する。
例えばここで自作のスクロール処理でページ上部へ戻ろうとしても、リンク本来の動作が発生してスクロール処理する前にページ上部へ移動してしまう。
hrefに上述のjavascript:void(0)を書けば無効化でき、自作のスクロール処理は機能するが、JavaScriptを無効にしている人（あまりいないと思うが）は何も起きなくなってしまう。

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
document.getElementById("jstest").addEventListener("click", function(){
	//以下に処理を書く
}, false);
</script>

一応<a href="#test">など存在しない飛び先（id）を指定すればリンク本来の動作は発生せずJavaScriptだけが実行されるが、これもJavaScriptを無効にしている人は何も起きない。
というわけで、<a href="#">のまま何とかする方法を以下に記す。

preventDefault()でイベントキャンセル

イベントをキャンセルする方法はいろいろあるが、preventDefault()を使うのが最も無難と思われる。

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
document.getElementById("jstest").addEventListener("click", function(e){
	e.preventDefault();//イベントをキャンセル
	//以下に処理を書く
}, false);
</script>

function(e)と書いてイベントを拾い、e.preventDefault();でイベントをキャンセルする。
その後、自分がやりたい処理を書く。

jQueryでリンククリックの既定動作をキャンセル

クリック無効化の話はjQueryを使わずスクロール処理を自作することが発端なのにjQueryを使うのは変だが一応書いておく。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
//リンククリックの既定動作をキャンセル
$(function(){
	$("#jstest").click(function(){
		return false;
	});
});

document.getElementById("jstest").addEventListener("click", function(){
	//以下に処理を書く
}, false);
</script>

ちなみにjQueryでページ上部へスクロールさせる場合はこういう処理を書く必要がない。

removeAttribute()でhref属性を削除して無効化

リンクを無効化するならhref属性を消してしまえば良いじゃないかというわけでremoveAttribute()を使う方法もある。

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
document.getElementById("jstest").addEventListener("click", function(e){
	var jstest = document.getElementById("jstest");
	jstest.removeAttribute("href");//href属性をなくす
	//以下に処理を書く
	
	//以上処理
	jstest.setAttribute("href", "#");//処理が終わったらhref属性を元に戻す
}, false);
</script>

ただし、href属性を消すとアンカーが消えるので、処理が終わったらsetAttribute()で元に戻す必要がある。
元に戻す必要がなければそのままでも良いが。

CSS pointer-events:none

CSSでa要素に pointer-events:none を指定するとリンクが機能しなくなる。
ただし、JavaScriptのイベントも起きないので、今回の目的では使えない。
ブラウザによっては pointer-events が効かないものもある。