JavaScriptでのリンク処理
ほとんどスクリプトなんかを触らない人には知られてないのかなーって気がしたのでメモ。JSでaタグにonclickとかっていう処理をした場合に、href属性には#を入れるとかそういった場合。何もしなければブラウザによってはページトップに移動で余計な動作。これをJSで消す。
-
<!-- ページトップに飛ぶかバリデータ対応がめんどいやり方 -->
-
<a href="#" onclick="onClickHandler();">hoge</a>
-
<a href="javascript:void(0);" onclick="onClickHandler();">hoge</a>
-
<!-- return falseを返すことで上記のデメリット回避 -->
-
<a href="#" onclick="onClickHandler(); return false;">hoge</a>
こんな感じでreturnでfalseを返すのがいいです。あとはそもそもJSで管理してしまうとか。基本的にDOMで取れないことはないですが下記JSでは$関数でtargetというIDを振った場合。
-
$(target).onclick = function(e) {
-
alert(e.target);
-
return false;
-
}
こんな感じでクリックのイベントもJSで追加。addEventListenerはIEが(ry。HTMLにはonclickは書かなくて済みhrefも#を入れておくだけ。処理は全部JSでまとめて処理。関数なので1回書けばいい。それにどれをクリックされたかやどれをクリックしたいかとかも全部JSで処理できるので楽。
それにしてもこのソース表示のプラグインいいんだけど重すぎ。やっぱり軽いほうがいいなー。あとWPにキャッシュ機能ぽいのがあるようなので今度それも試してみよ。
