Vue.js

【Vue.js】preventDefaultとstopPropagationの使い方

生徒
生徒
Vue.jsでpreventDefault,stopPropagationってどうやって書くのかな?

上記のような疑問の解決記事です。

両者はJavaScriptにおいて、以下の役割を持ちます。

  • aタグリンクの遷移を防ぐ(preventDefault
  • イベントバブリングを防ぐ(stopPropagation

 

Vue.jsでももちろん挙動は同じですし、JavaScriptよりも簡単な記述になります。

  • preventDefaultは.prevent
  • stopPropagationは.stop

これらは「イベント修飾子」と呼ばれ、他に以下のようなものがあります。
(参考までに)

  • capture
  • .self
  • .native
  • .once
  • passive

 

ここでは「イベント修飾子」でも、使用頻度が高い.prevent.stopについて、コードとブラウザ画面を確認しながら解説していきます。

 

.preventの使い方

.preventは以下のように使います(コピペ可)。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
</head>
<body>
    <div id="app">
        <div v-on:click="clickHandler('divタグ')">
            divタグ<br>
            <a href="https://corecolors.net" v-on:click="clickHandler('aタグ')">aタグ</a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            methods: {
                clickHandler(text) {
                    console.log(text)
                }
            }
        })
    </script>
</body>
</html>

 

特徴としては下記です。

  • divタグ内にaタグ
  • aタグをクリックすると遷移
別ページに遷移(この挙動が普通)

当然ながら、別ページに遷移します。

 

リンク先に遷移させたくない時.preventをつけます。
11行目を以下のように変更しましょう。

<a href="https://corecolors.net" v-on:click.prevent="clickHandler('aタグ')">aタグ</a>

 

ページ遷移しない(.prevetで無効化)

 

遷移しなくなったことが分かります。これが.preventです。

 

.stopの使い方

同じように.stopも見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
</head>
<body>
    <div id="app">
        <div v-on:click="clickHandler('divタグ')">
            divタグ
            <p href="https://google.com" v-on:click="clickHandler('pタグ')">pタグ</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            methods: {
                clickHandler(text) {
                    console.log(text)
                }
            }
        })
    </script>
</body>
</html>

 

こちらも特徴をお伝えします。

  • divタグ内にaタグ
  • クリックするとconsole画面にそれぞれ(’devタグ‘, ‘pタグ‘)が表示
pタグ(文字列)クリック時に、’pタグ’と’divタグ’がセットで出力される・・・

divタグ(文字列)をクリックした時は良いです。

しかし、pタグ(文字列)をクリックすると、なぜか’divタグ‘も出力されます。

これがイベントバブリングです。プログラム処理が伝播してしまっています。

 

これを防止するのが、.stopです。

11行目に.stopをつけましょう。

<p href="https://google.com" v-on:click.stop="clickHandler('pタグ')">pタグ</p>

 

‘pタグ’だけの出力に変わっている

 

pタグ‘だけの出力になりました。

 

まとめ

本記事では「【Vue.js】preventDefaultとstopPropagationの使い方」について、以下のことをお伝えしました。

  • .preventの使い方
  • .stopの使い方

JavaScriptと比べると、随分簡単な書き方になります。
必要な時にぜひ使ってみてください。

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。