記事内に商品プロモーションを含む場合があります
生徒
Vue.jsでpreventDefault,stopPropagationってどうやって書くのかな？
上記のような疑問の解決記事です。
両者はJavaScriptにおいて、以下の役割を持ちます。
- aタグリンクの遷移を防ぐ（preventDefault）
- イベントバブリングを防ぐ（stopPropagation）
Vue.jsでももちろん挙動は同じですし、JavaScriptよりも簡単な記述になります。
- preventDefaultは.prevent
- stopPropagationは.stop
これらは「イベント修飾子」と呼ばれ、他に以下のようなものがあります。
（参考までに）
- capture
- .self
- .native
- .once
- passive
ここでは「イベント修飾子」でも、使用頻度が高い.preventと.stopについて、コードとブラウザ画面を確認しながら解説していきます。
Contents
.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と比べると、随分簡単な書き方になります。
必要な時にぜひ使ってみてください。
