「a href=”#” onclick=”…”」を使わないダミーリンクの記述方法

HP制作の過程で＜a href=”#”＞リンク＜/a＞といったダミーリンクを作る場面があると思います。

私は以前、クリックでページを開くのではなく音声を出す仕組みを作ったことがあります。その時、＜a href=”#” onclick=”…”＞リンク＜/a＞という記述をしたのですが、クリックした後にページが上部に遷移してしまう問題が起こりました。

調べてみたところ、ダミーリンクを入れる場合は次のやり方が推奨されるようです。

関連記事：CSSでリンク範囲を親要素全体に広げる簡単な方法を解説

ダミーリンクの記述方法

javascript:void(0)を使います。

<a href="javascript:void(0)" onclick="…">リンク</a>

もしくは

<a href="javascript:（onclickの内容）">リンク</a>

という記述ができます。

あるいは、spanを使って

<span style="cursor: pointer" onclick="…">リンク</span>

という方法もあります。