.stopで伝播を防ぐ ❏Vue.js❏

マウスがのった場所のX軸とY軸を表示します。
ただし、stopにのった時は伝播を防いでmousemoveイベントを発火させません。

開発環境はJSFiddle
https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <p v-on:mousemove="changeMousePosition">のせて！
  <span v-on:mousemove.stop>stop</span></p>
  <p>x:{{ x }}, y:{{ y }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    x: 0,
    y: 0
  },
  methods: {
    changeMousePosition: function(event) {
      this.x = event.clientX;
      this.y = event.clientY;
    }
  }
})

stopPropagationを仕込むと伝播を防いでくれます。
本来はJS側でevent.stopPropagation()と記述します。

しかし、Vue.jsでは、html側でv-on:mousemove.stopと繋げることで簡単に実装できます。

ではまた！