Re:href="#" onclick の悪習

ネタ元：某日記：href="#" onclick の悪習

<a href="#" onclick="...">検索</a>

なんて書き方やめようぜ！というお話

a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。

#なんかが入ってるとページの一番上部にページ内遷移をする。(※1)

某日記さんの代替案ですけどspanで代替するもの

<span style="cursor: pointer" onclick="...">検索</span>

私だとこんな書き方

<a href="javascript:void(0)" onclick="...">検索</a>

onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある

<a href="javascript:（onclickの内容）">検索</a>

ただし、javascript:は有効なURIスキームではない(参考：Permanent URI Schemes)(追記2007/08/20)

どうせJavaScript offの環境では動作しないので、いっそこう書いてしまうやり方もある

<script type="text/javascript">
documet.write('<a href="javascript:void(0)" onclick="...">検索</a>')
</script>
<noscript>
JavaScriptがoffですと検索機能はご利用いただけません
</noscript>

JavaScriptソースをHTMLから切り離す事を考えるとこんな感じ?

JavaScriptソース

window.onload = function(){
	var e = document.createElement('a')
	e.href = "javascript:void(0)";
	e.setAttribute("onclick","onclickの内容");
	e.innerHTML = "検索"
	document.replaceChild(e, document.getElementById("search"));
}

HTMLソース

<p id='search'>
JavaScriptがoffですと検索機能はご利用いただけません
</p>

window.onloadが他のスクリプトとバッティングしないように

var searchFn = function(){
	var e = document.createElement('a')
	e.href = "javascript:void(0)";
	e.setAttribute("onclick","onclickの内容");
	e.innerHTML = "検索"
	document.replaceChild(e, document.getElementById("search"));
}
function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}
addEvent(window,"load",searchFn);

オブジェクトを汚染しないようにスコープを変えてみると

new function(){
	searchFn = function(){
		var e = document.createElement('a')
		e.href = "javascript:void(0)";
		e.setAttribute("onclick","onclickの内容");
		e.innerHTML = "検索"
		document.replaceChild(e, document.getElementById("search"));
	}
	function addEvent(elm,listener,fn){
		try{
			elm.addEventListener(listener,fn,false);
		}catch(e){
			elm.attachEvent("on"+listener,fn);
		}
	}
	addEvent(window,"load",searchFn);
}

えーと何書いてたんだっけ・・・

※1
onloadイベントの最後の処理にreturn falseを行ったり、preventDefaultメソッドを使いイベントのキャンセル処理を行えばhrefの値を参照することはありません。(追記:2007/8/2)

スポンサードリンク

«キーワード出現頻度に関する考察【SEO対策TIPS】 | メイン | [書評]フューチャリスト宣言»