.stop 전파 방지 ≠ Vue.js❏

2989 단어 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의 연결을 통해 간단하게 설치할 수 있습니다.
그럼 안녕!

좋은 웹페이지 즐겨찾기