前置き
今回はイベントハンドラ内でevent.preventDefault()などの関数を
簡単に呼び出せるイベント修飾子です❤️
公式: イベント修飾子
⬇️イベントの基礎構文は
こちらをご確認ください👀
使い方と対応イベント
@click.修飾子="methods名"
イベントでは
様々な修飾子(event modifiers)が使えます！
それぞれの意味を理解し、
親につけるのか❓
子につけるのか❓
着目してみてください👀
修飾子は繋げられるので@click.stop.prevent
のようにも使えます。
(ただ具体的な使用例をあまり見ません🤔)
ほとんどはcilckイベント(@click)で
使用しますが、preventの時はformタグ内の@submitが主です。
stop
Event.stopPropagation()を呼び出します🎻
子から親へのイベントの伝搬を止めます🛑✋
子をクリックした時に
子 → 親 の順で発生するものが
子だけに留まります。
ありなし比較
.stopなし
親子でmethodsを別々にしていても
親に伝搬します(親のmethodsを呼び出す)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="parent" @click="clickParent"> <div class="child" @click="clickChild"></div> </div> </template> <script> export default { methods: { clickParent () { alert('parent') }, clickChild () { alert('child') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
.stopあり
子に.stopをつけることで
親への伝搬を止め、
子のみmethodsを実行します🌟
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="parent" @click="clickParent"> <div class="child" @click.stop="clickChild"></div> </div> </template> <script> export default { methods: { clickParent () { alert('parent') }, clickChild () { alert('child') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
prevent
Event.preventDefault()を呼び出します🎻
本来の挙動を妨げます。
⬇️こちらで使用しました💫
【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方
buttonでform送信する時やinput入力後にエンターを押した際、
本来はリロードします。
それを防ぐために使われます🛑✋
|
1 2 3 4 5 6 7 8 |
<template> <div class="page"> <form @submit.prevent> <input> <button type="submit">アンケートを終了する</button> </form> </div> </template> |
capture
addEventListener()
optionsのcaptureを呼び出します🎻
子を押した時のイベントの発生順が
子 → 親 ではなく
親 → 子 になります。
.captureは親につけます。
ありなし比較
.captureなし
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="parent" @click="clickParent"> <div class="child" @click="clickChild"></div> </div> </template> <script> export default { methods: { clickParent () { alert('parent') }, clickChild () { alert('child') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
.captureあり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="parent" @click.capture="clickParent"> <div class="child" @click="clickChild"></div> </div> </template> <script> export default { methods: { clickParent () { alert('parent') }, clickChild () { alert('child') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
self
Event.targetが
その要素自身の時のみイベントが発生💥
通常は子でイベントが発生すると
子 → 親 で伝搬しますが
親は自分がクリックされた時だけ
イベント発生したい場合に使います。stopとほとんど同じように見えますが
同じイベント名を使っている時なんかに
使うのかもしれませんね🤔
そもそもそれなら別のイベント名にした方が
設計的に良い気はします💭
ありなし比較
selfなし
分かりにくいですが、
子 → 親 の計2回
イベントが発生しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <div class="parent" @click="clickItem"> <div class="child" @click="clickItem"></div> </div> </template> <script> export default { methods: { clickItem () { alert('同じイベント名') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
selfあり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <div class="parent" @click.self="clickItem"> <div class="child" @click="clickItem"></div> </div> </template> <script> export default { methods: { clickItem () { alert('同じイベント名') }, }, } </script> <style lang="scss" scoped> .parent { padding: 20px; width: 80px; height: 80px; background-color: salmon; display: flex; align-items: center; justify-content: center; .child { width: 50px; height: 50px; background-color: lightgray; } } </style> |
once
addEventListener()
optionsのonceを呼び出します🎻
イベントの発火を1回に制限します。
おっ、formのボタンにつけて
多重送信の防止ができそう💡😀
と、思いきや、、、
1度呼び出した後に削除されてしまうので
何かしらのエラーで送信できなかった場合、
再度送信ができません😩💦
実装したい場合は
この記事が参考になります❤️👀
setTimeoutを使って
実装されているようですね👏
https://qiita.com/ryo511/items/2563bb61b4b4d1be9619
passive
addEventListener() optionsのpassive
preventDefault()を呼び出さないことを明示します。
Scroll Jankの解決策として利用されます。
こちらの記事が参考になります❤️👀
passive: trueでなぜパフォーマンスがよくなるの？簡単な説明と使い方！
native
子にあるinputのイベントを
親で使いたい時になどに使用します。
こちらで使用しました！
ありなし比較もこちらで確認できます✨👀
【Nuxt.js】Nuxt文法編：v-model②
|
1 2 3 4 5 6 7 8 9 |
<template> <div class="page"> <InputDefault v-model="value" @keyup.native.enter="pushItem" /> <p>{{ value }}</p> </div> </template> |
まとめ
様々な関数を修飾子として
サラッと使えるのは便利ですね💕
個人的にはselfの使い道が
どこなのかパッとしないので、
こんな時に使うと良いよ！！！
などがあれば教えていただけると嬉しいです🙌