フロントエンドで遷移するイベントを実装する時があります。
最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。
もちろん、全てdivでも何ら問題はありません。
しかし、何かしら遷移が発生する場合は、（好みの問題ではありますが）リンク要素としてaタグにしたい場合があります。
ただ、aタグは、タグの性質上クリックするとリンク先に飛んでしまいます。
aタグにイベントをつける場合は、本来のリンク先に飛ぶ機能を無効化して、clickイベントを付与する必要があるわけです。
今回は、aタグの無効化方法と違いについて記載したいと思います。
目次
aタグを無効化する方法
タグを無効化する方法はいくつかあります。
下記に挙げるもの以外の方法もあるかもしれませんが、私が今まで見てきたイベントの無効化は次の通りです。
javascript:void(0)
スクリプトの結果を必ずundefinedにします。
aタグが持つリンク先に遷移する機能自体を未定義にする方法です。
<a href="javascript:void(0)">
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>
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;">
pointer-events のデメリット
比較的新しい機能ですので、古いブラウザーには対応していません。
まとめ
今回ご紹介した３つの方法は簡単にまとめると次のような使い分けが出来ると思います。
用途に合わせて使い分けてください。
| 方法 | 概要 |
|---|---|
| void(0) | aタグが持つリンク先に遷移する本来の機能を定義しない |
| return false | タグ自体を途中で止める |
| preventDefalut() | aタグが持つリンク先に遷移する本来の機能を止める |
