Mouseover when button is clicked does not always work Vue.js

1

codepen link:

Hello everyone,
I am currently building a light bright app. It’s supposed to function similar to this

However, my problem is that mouse drag does not always work. The code that is supposed to take care of this is shown below.

          on: {
            mouseover: function(event) {
              if (event.buttons === 1) {
                event.target.style.background =
                  "rgba(" +
                  colour[0] +
                  ", " +
                  colour[1] +
                  ", " +
                  colour[2] +
                  ", 1)";
              }
            },

The issue I am having is that sometimes when I hold the mouse click down the circle sometimes changes but sometimes I get the circle “not-allowed” icon. How can i make sure it works all the time?

2

WOW!!!
I finally fixed it. The answer was here https://javascript.info/mouse-drag-and-drop

In a nutshell here is why =>
That’s because the browser has its own Drag’n’Drop for images and some other elements that runs automatically and conflicts with ours

The correct question i finally asked was Javascript “mousemove” event sometimes doesn't fire which led me to => (https://stackoverflow.com/qustions/53298914/javascript-mousemove-event-sometimes-doesnt-fire) .