イベント修飾子とは？
DOMイベント等で最初に行われそうな処理をまとめたもののこと。
よく使うイベント修飾子
他にも様々な修飾子があるのですがよく使われるのは下記の修飾子になります。
- stop
- prevent
- native
- sync
stop
stopを使わない場合
例えば、以下のようにclickイベントを入れ子にした場合何もしない場合は「伝搬する」→「eventオブジェクト」がそれぞれ出力されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="app"> <p v-on:click="click">clickしてください。<span v-on:click="noClick">ここはclick反応しないでください。</span></p> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function (event) { console.log(event); }, noClick: function (event) { console.log('伝搬する。'); } } }) </script> |
普通はstopPropagationを使う
下記のようにメソッドの先頭に「event.stopPropagation()」を使うことで伝搬されなくなります。（「伝搬する。」のみ出力されるようになります。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="app"> <p v-on:click="click">clickしてください。<span v-on:click="noClick">ここはclick反応しないでください。</span></p> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function (event) { console.log(event); }, noClick: function (event) { event.stopPropagation(); ★ console.log('伝搬する。'); } } }) </script> |
stop修飾子で書き換え
stop修飾子なら楽に書き換える事が可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="app"> <p v-on:click="click">clickしてください。<span v-on:click.stop="noClick">ここはclick反応しないでください。</span></p> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function (event) { console.log(event); }, noClick: function (event) { console.log('伝搬する。'); } } }) </script> |
完全に部分的に反応させたくない場合
処理を呼ばずに、完全にその部分の処理を呼びたくない場合は下記のようにstopで記述を止めるようにします。
|
1 2 3 |
<div id="app"> <p v-on:click="click">clickしてください。<span v-on:click.stop>ここはclick反応しないでください。</span></p> </div> |
prevent
通常リンクにJavaScriptの処理を記述したい場合は、aタグの通常のリンクの機能を無効化したいです。その場合は通常は下記のように「event.preventDefault()」と記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app"> <a href="#" v-on:click="click">リンクです。</span></a> </div> <script> new Vue({ el: "#app", data: { }, methods: { click: function (event) { event.preventDefault(); } } }) </script> |
下記のように記述する事で楽に記述する事が可能です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <a href="#" v-on:click.prevent="click">リンクです。</span></a> </div> <script> new Vue({ el: "#app", data: { } }) </script> |
native修飾子
親要素でおきたイベントをトリガーにして子のメソッドを実行したい場合に使います。
構文
|
1 |
<子コンポーネント @click.native="子のメソッド"></子コンポーネント> |
メリット
親要素のDOMイベントをトリガーとして子のメソッドを実行することができます。
sync修飾子
通常は、親→子の方向へしか双方向のデータバインディングができないですが、sync修飾子を使うことで子→親へのバインディングも可能とします。
この記事へのコメントはありません。