javascriptのイベントキャンセル方法（preventDefault）｜ プロサバメモ

javascriptのイベントキャンセル方法（preventDefault）

例えば以下のようなコード。

リンクをクリックすると、hoge()が呼び出され、alert表示後、hrefに指定されたアドレスに遷移します。

まあ、aタグなのでクリックされることでリンク先に遷移するというのはあたりまえですよね。

<script>
function hoge() {
    alert( 'リンクをクリックしましたね');
}
</script>
<a href="https://sym.me" onclick="hoge()" target="_blank">リンク</a>

以下例（リンクをクリックすると別タブが開きます）

preventDefaule()を使うとイベントに関連したデフォルトの動作をキャンセルできます。

この例では、aタグを使用しているのでデフォルトの動作は「クリックするとリンク先に飛ぶ」なのですが、hoge()にpreventDefaule()を追加したことによってaタグの本来のイベントがキャンセルされてalertだけが表示されるようになります。

<script>
function hoge() {
    event.preventDefault();
    alert( 'リンクをクリックしましたね');
}
</script>
<a href="https://sym.me" onclick="hoge()" target="_blank">リンク</a>

以下例（preventDefaultによってaタグのリンク先に飛ぶという動作がキャンセルされている！）

以上、簡単な使い方でした。