javascriptでaリンクにイベントを設定する。

意外と使用するので覚書で記載。a hrefをしようするよりもいろいろな面で効率がいいのかなとこの方法だとjQueryでイベントを設定するので読み込みも早いと思うので。

javascriptでの記載

$(function(){
    $(".link").on('click',function(event){
        event.preventDefault();
        event.stopPropagation();
        location.href = 'https://office606.org' + $(this).attr('href');
        return false;
    });
});

htmlでの記載

単純にclassを設定し、hrefの文字列を記載する。

<a href="1" class="link">ページ１</a>
<a href="2" class="link">ページ２</a>

覚書

このリンクを用いればidやclassにリンクを付けることができるのでsvgやcssで定義したボタンをクリックすることが出来るので簡単にボタンを作成することができるなと。ちなみにマウスカーソルを変更するcssを定義してあげれば指マークに変わるのでユーザビリティ対策もできます。マウスポイントを定義するcssは下記になります。

マウスカーソルを定義するcss

僕が使用するのは基本、ポイントのみになりますので下記に記しておきます。

    cursor: pointer;
    cursor: hand;　/*handはIE対策*/

Originally posted 2016-07-11 11:24:15.