[Vuejs]-VUE why action fires many times

by

3👍

✅

everytime you click on your canvas, you add an event listener to it.

canvas.addEventListener('click', event => { [...]

this is your issue. You just need to do the logic you need in the clickMe, not add an other event listener to your canvas. The @mousedown event will send the event parameter with the wanted coordinates :

clickMe(event) {
  const canvas = document.getElementById('canvasId')
  const rect = canvas.getBoundingClientRect()
  const x = event.clientX - rect.left - canvas.clientLeft
  const y = event.clientY - rect.top - canvas.clientTop
  this.xpos = Math.round(x)
  this.ypos = Math.round(y)
  this.click = {
    cmd: 'rightClick',
    x: Math.round(x),
    y: Math.round(y),
  }
  this.sendMessage(this.click)
},
👤vicovicovico

Leave a comment