リンクをクリックしたときちょっとだけ早く移動するJavaScript

リンクを mousedown された状態で移動させる

通常 a 要素をマウスで click すると所定のページ、もしくは位置まで移動します。

この「click」という動作は

マウスボタンが下に押される (mousedown)

マウスボタンが上に戻る (mouseup)

の2つの動作を続けてやって初めて「click」と認識されます。つまり、

click = mousedown + mouseup

ということです。

人がマウスをクリックするのに何秒かかるのかわかりませんが、 mouseup が完了して初めて、所定のページまで飛びます。

この mouseup にかかる時間を省略すれば高速化につながるのではという事で、mousedown のみを感知して、mouseup する前に読み込みを開始してしまおうという JavaScript コードです。body の閉じタグの直前、body の一番下に入れてください。

JavaScript

//全 a 要素を取得
var link = document.getElementsByTagName("a");
for(i = 0; i < link.length; i++) {

    //mousedown イベントが発生した場合
    link[i].addEventListener("mousedown", function(e) {

        //左ボタンが押された場合のみ
        if (e.button === 0) {

            //通常のアクションは制御
            e.preventDefault();

            //a 要素の href に移動
            location.href = this.href;
        }
    }, false)
}

デモ

このページで現在上記の JavaScript コードを仕込んでありますので、どの a 要素を踏んでも mousedown のみで移動することを確認できると思います。mouseup しなくても移動してしまいます。

やってもらえばわかる通りほぼノーマルの状態と違いがありません。全く体感できません。残念。

まとめ

最初に書いた通り完全にお遊びですし、デフォルトの動作を多少弄っているのでバグなどの不安もあります。

ただ高速化がすすめば進むほど敏感な人が増えるかもしれませんし、もしかしたら将来この差でも感じ取れるようになるかもしれません。多分なりませんが。