はじめに
この記事ではVue.jsでイベントのバブリングを防ぐ方法についてまとめます。
結論
イベント修飾子である.stopを使用するとイベントのバブリングを防ぐことができます。
そもそもイベントのバブリングって何？
イベントが親要素に順に伝播していくことをイベントのバブリングと言います。
以下のようなコードで実験してみましょう。
リストの項目(liタグ)をクリックすると太字に、ゴミ箱のマーク(iタグ)をクリックすると打ち消し線が表示されるコードです。
<div id="app">
<ul>
<li v-on:click="select(fruit);" v-for="fruit in fruits" :key="fruit.id">
<span v-bind:style="{
fontWeight: (fruit.selected ? 'bold' : 'normal'),
textDecoration: (fruit.removed ? 'line-through' : 'none')
}">{{ fruit.name }}</span>
<i class="fas fa-trash" style="margin-top: 4px;" v-on:click="remove(fruit);"></i>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: [
{id: 1, name: 'リンゴ', selected: false, removed: false},
{id: 2, name: 'バナナ', selected: false, removed: false},
{id: 3, name: 'ブドウ', selected: false, removed: false}
],
},
methods: {
select: function(fruit) {
fruit.selected = !fruit.selected;
console.log("Called select method.");
},
remove: function(fruit) {
fruit.removed = !fruit.removed;
console.log("Called remove method.");
}
}
});
</script>
実際の画面
ここで、ゴミ箱のマーク(iタグ)をクリックした場合にどうなるか確認してみます。
実行結果
コンソール
Called remove method.
Called select method.
iタグのクリックイベントの後に、liタグのクリックイベントも呼ばれていることが分かると思います。
このようにイベントが親要素に順に伝播することをイベントのバブリングと呼びます。
Vue.jsでイベントのバブリングを防ぐには？
打ち消し線は表示したいけど、太文字にはしたくないということもあるでしょう。
そんなときは、イベントのバブリングを防ぐ必要があります。
イベントのバブリングをVue.jsで防ぐには、.stopというイベント修飾子を使用します。
<i class="fas fa-trash" style="margin-top: 4px;" v-on:click.stop="remove(fruit);"></i>
この状態で先ほどと同じように、ゴミ箱のマーク(iタグ)をクリックした場合にどうなるか確認してみます。
実行結果
コンソール
Called remove method.
iタグのクリックイベントだけが呼ばれ、太文字にはならず、打ち消し線だけ表示されるようになりました。
このように.stopを使用することで、イベントのバブリングを防ぐことができます。
まとめ
- イベントが親要素に順に伝播していくことをイベントのバブリングという
- Vue.jsでイベントのバブリングを防ぐにはイベント修飾子の
.stopを使用する
イベントのバブリングという言葉自体知らなかったので、勉強になりました。
それではまた。
TomoProg