勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

aタグにてhref属性の「javascript:void(0);」の代替手段について

  JavaScript

aタグにJavaScriptやjQueryでイベントを割り当てたい場合、href属性に「javascript:void(0);」を指定していたが、ソースコードの見た目やリンク部分のマウスオーバー時の表示内容が微妙という点で他の方法に切り替えたい。以下に代替手段をメモ。

 

代替手段

href属性を付けない

こちらが簡単に対応できそうだけどCSSがうまく当たらない場合があるらしい

<a>href無し</a>

return false;を指定する

<a href="./" class="dummy_link">href有り</a>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`.dummy_link`).on(`click`, function(){
        return false;
    });
});

 

所感

buttonタグやinput type="button"に変更できたらいいんだけど、コーディングデータからタグ構成を勝手に変えるというのは色々難しいケースが多い。そのような場合は上記の代替手段で対応したいところ。

 - JavaScript

  関連記事

マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...