I have a few mouse event listeners bound to each class instance that draws a canvas. It should listen to changes in mouse events when certain events happen. And it needs to track the mouse events even when the mouse is clicked and moved around the document.

The problem is that sometimes when the mouse is clicked and moving around the screen, it marks up some text, or even just blank space. Then when I keep moving the mouse, the browser displays the "forbidden action" symbol and stops tracking the events.

This is an image of the problem: broken listeners

Each canvas is a class instance and has its own listeners, this is how I set it inside the class:

this.canvas.addEventListener('mousedown', (e) => {
    // code
    }
});

document.documentElement.addEventListener('mouseout', (e) => {
    // code 
    }
});

document.documentElement.addEventListener('mouseover', (e) => {
    // code
    }
});

document.documentElement.addEventListener('mouseup', (e) => {           
    // code
    }            
});