【javascript】aタグの無効化

フロントエンドで遷移するイベントを実装する時があります。
最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。

もちろん、全てdivでも何ら問題はありません。
しかし、何かしら遷移が発生する場合は、(好みの問題ではありますが)リンク要素としてaタグにしたい場合があります。

developer.mozilla.org

ただ、aタグは、タグの性質上クリックするとリンク先に飛んでしまいます。
aタグにイベントをつける場合は、本来のリンク先に飛ぶ機能を無効化して、clickイベントを付与する必要があるわけです。

今回は、aタグの無効化方法と違いについて記載したいと思います。

aタグを無効化する方法

タグを無効化する方法はいくつかあります。
下記に挙げるもの以外の方法もあるかもしれませんが、私が今まで見てきたイベントの無効化は次の通りです。

javascript:void(0)

スクリプトの結果を必ずundefinedにします。
aタグが持つリンク先に遷移する機能自体を未定義にする方法です。

<a href="javascript:void(0)">

developer.mozilla.org

return false

clickイベントとして入力は受け付けますが、定義したclickイベント内で止めてしまう方法です。
イベントを止める事で、親要素が持つリンク先に遷移する機能も実行しません。

<a id="click_event" href="#">
...
<script type="text/javascript">
   document.getElementId('click_event').addEventListener('click', function(event) {
       return false
       // 以降の処理は受け付けない
   })
</script>

preventDefalut()

clickイベントとして入力は受け付けますが、親要素のイベントを実行させない方法です。
親イベントが持つリンク先に遷移する機能のみ無効化します。

<a id="click_event" href="#">
...
<script type="text/javascript">
   document.getElementId('click_event').addEventListener('click', function(event) {
       event.preventDefalut()
   })
</script>

developer.mozilla.org

return false との違い

return falaseと違い、clickイベント自体を中断するわけではありません。
あくまで、親要素に親要素のイベントを実行しないように通知するだけです。

そのため、preventDefalut()以降の処理に処理を書いて受け付けることも出来ます。

<a id="click_event" href="#">
...
<script type="text/javascript">
   document.getElementId('click_event').addEventListener('click', function(event) {
       event.preventDefalut()
       // 以降の処理は受け付ける
       alert('click event!')
   })
</script>

【おまけ】pointer-events

javascriptのイベント自体を操作する方法ではありませんが、CSSでポインターイベント自体を無効化する事でaタグを発火させない方法もあります。

<a id="click_event" href="#" style="pointer-events: none;">

developer.mozilla.org

pointer-events のデメリット

比較的新しい機能ですので、古いブラウザーには対応していません。

まとめ

今回ご紹介した3つの方法は簡単にまとめると次のような使い分けが出来ると思います。
用途に合わせて使い分けてください。

方法 概要
void(0) aタグが持つリンク先に遷移する本来の機能を定義しない
return false タグ自体を途中で止める
preventDefalut() aタグが持つリンク先に遷移する本来の機能を止める

©︎2017-2018 WebSandBag