基礎からメモ： Vue.js CH3-p99 イベント修飾子

Vue.js

クリックなどのDOMイベントの振る舞いを制御する修飾子

  • .right マウスで右ボタンがクリックされたときのみハンドラを呼び出す
  • .prevent event.preventDefault() を呼び出す
<div v-on:click.right="handler">example1</div>

<div v-on:click.right.prevent="handler">example2</div>

次のメソッドで動作を検証

var app = new Vue({
  el: '#app',
  methods: {
    handler: function(comment) {
      console.log(comment);
    }
  }
})

example1、example2 ともにコンソールにはMouseEventが表示される。example1を右クリックすると普通に右クリックメニューが表示されるが、example2を右クリックしたときは.prevent修飾子が記述されているので右クリックメニューが表示されない。

  • .stop イベントのバブリングを停止
<div v-on:click="handler('div1')">
   div1
   <a href="#top" v-on:click.stop="handler('div2')">div2</div>
</div>

div1はクリックするとdiv1とコンソールに出力。div2は、.stopが付いていないとクリックしたときにdiv1もコンソールに表示されるが、.stopがあるとdiv2のみ表示（URLのハッシュは更新される）。

.prevent

<div v-on:click="handler('div1')">
  div1
  <a href="#top" v-on:click.prevent="handler('div2')">div2</a>
</div>

アンカーに.preventを使用。div2をクリックするとdiv1,div2とコンソールに出力されるが、.preventはevent.preventDefault() を呼び出すのでURLのハッシュは更新されない。

  • .capture キャプチャーモードでイベントを発生させる。
<div v-on:click.capture="handler('div1')">div1
    <div v-on:click="handler('div2')">div2
        <div v-on:click="handler('div3')">div3</div>
    </div>
</div>

.capture が付いていない状態では通常のバブリングが発生するので、div3 -> div2 -> div1 とコンソールにDOMを遡った順に表示されるが、.captureが付いているDOMはバブリングモードのイベントより先に発生するので、div1 -> div3 -> div2 の順に表示される。

  • .self event.target要素が自分自身のときだけハンドラが呼び出される。モーダルウィンドウの背景をクリックして閉じるなどで使える。
<div class="overlay" v-on:click.self="close">...</div>