aタグの挙動は上書きできる

TL;DR

a タグはクリック時にデフォルトで別のリンクへ移動するという挙動をするが、JS側でその挙動を書き換えることができる。

きっかけ

あるWebシステムのスクレイピングをしていた時に、aタグなのに遷移されないサイトを発見した。
内部実装が気になり調べてみた。

jQueryでの実装

実装部を確認したところ、jQueryで実装されていた。
以下が該当部分である。

// ドキュメントの読み込み終了時
$( document ).ready( function (){
	// リンククリック時
	$('.play_vod').live("click",function(event){
		// 行いたい挙動をここに記述
		return false;
	});
});

素のJSでの実装

jQueryを用いずに実装する場合、以下のようにできるらしい。
preventDefault でDefaultな挙動を防止。

// 要素の取得 & リスナーの設定の
document.getElementById('myLink').addEventListener('click', function(event){
// デフォルトの挙動（リンク先に遷移すること）をキャンセル
    event.preventDefault();  
    alert('Link was clicked!');
});

所感

aタグに設定したリンクで状態の再現性を保てる実装なら適切な場合もあるが、
基本的にはHTMLドキュメント的にはaタグでボタンのようなカスタムな挙動を実装するのはベストプラクティスではないのではと思った。
ご意見・ご指摘等お待ちしてます。