javascriptのイベントキャンセル方法(preventDefault)| プロサバメモ

WEBプログラミングやサーバ設定などのメモ場

javascriptのイベントキャンセル方法(preventDefault)

2022.03.17

javascriptのイベント(event)をキャンセルする方法です。簡単な例としてaタグを使います。

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

リンクをクリックすると、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タグのリンク先に飛ぶという動作がキャンセルされている!)

リンク

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

関連記事

TOP