<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)

スポンサードリンク

日時: 2007年8月 1日 13:56
javascript

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

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/174

コメント

JavaScript がオフな環境も考慮するクセは大事ですね。これが早くアタリマエになってほしいです。

投稿者:みさね | 2007年8月 1日 15:26

＞みさねさん

そうですね。
オフな環境を意識するのは大事だと思います。
ただオフな環境を意識しすぎると、JavaScriptの素敵な機能が使いにくくなるので、そんなジレンマもあったりでｗ

投稿者:西畑 | 2007年8月 2日 00:25

aに限りませんがonclickのハンドラでfalseを返せば#で遷移しませんよ。
何か#が悪しき行為のような印象を受けましたのでコメントしておきます。

投稿者:たま | 2007年8月 2日 12:38

＞たまさん

コメントありがとうございます。

#を悪者にするつもりはなく、『void(0)もあるよ』との補足(+後半のネタ)のつもりの軽いエントリーだったのですが、結構反響が出てしまったので、そう取られる方もいるかもしれませんね。

falseの件も追記いたしました。

また、なにか気になることがありましたらコメント、よろしくお願いします。

投稿者:西畑 | 2007年8月 2日 23:03

javascript: はデファクトスタンダードではありますが、有効なURIスキームではないので、こだわるなら問題だと思います。
というか、クリックすると script が走るようなのはボタンにしませんか。

投稿者:シャノン | 2007年8月 3日 18:48

＞シャノンさん

コメントありがとうございます。

わたしは、とくにこだわってないのでspanだろうが、aだろうがbuttonだろうがinputだろうがなんでも良いと思っています。

ただ、<a href="#" onclick="...">検索</a>がどのような挙動をおこない、どのような目的の為に配置されている要素なのかわからない状況で、spanの方がよい、buttonの方がよいとの見解は本エントリーでは触れないようにしております。

でも大体の場合はbuttonが適切なんだろなと思ってますｗ

あとですが有効なURIスキームについて、何が有効でどこの仕様か教えていただけないでしょうか？
私の方でも探したのですが見つからなくて・・・

すみませんが、よろしくおねがいします。

投稿者:西畑 | 2007年8月 4日 01:45

トラックバック送ったのですがなぜか届いていないのでコメントにて失礼します。

http://d.hatena.ne.jp/HolyGrail/20070802/1186074845
に記事を書き起こしてみました。
お時間のあるときにご一読くださいませー。

投稿者:HolyGrail | 2007年8月 5日 01:37

href="#"も悪習ですが、e.setAttribute("onclick",..)はそれ以上に悪習です。
せっかくaddEventを定義しているのですからaddEvent(e,...)しましょう。
または古くてもJS1.0からの規定が残っているe.onclick=functionで。

投稿者:Anonymous | 2007年8月 5日 04:48

URIスキームはIANAが管理しています。
http://www.iana.org/assignments/uri-schemes.html

# 遅くなってすいません

投稿者:シャノン | 2007年8月15日 13:09

＞HolyGrailさん

コメントありがとうございます。
ライブラリを使うと簡単にかけますよね。
参考にさせていただきます。

＞Anonymousさん

コメントありがとうございます。
ご指摘ありがとうございます。
今後参考にさせていただきます。