How To Prevent Mouseenter/mouseleave Events Getting Fired For Canvas If A Button Is On Top Of Canvas And If Mouse Enters The Button

We are implementing Video Call application. And user should be able to draw on the video using mouse and when mouse enters the remote video, we need to display a button on the vide

Solution 1:

You do not necessarily need to avoid those events being fired. You can use a flag for mouseenter:

    $('#localCanvas').on('mouseenter', (e) => {
        if (!buttonHovered) {
            //Your code
        }
        buttonHovered = false;
        canvasHovered = true;
    });

Of course you need to initialize those flags with false. The hover on button should set buttonHovered to true. Now, if the canvas is surrounded by a tag, then, instead of a mouseleave on the canvas you can define a mouseenter for its surrounding tag and check for the value of canvasHovered at the start and set canvasHovered to false at the end.

Solution 2:

Adding 'pointer-events: none;' to the button solved the problem. But click event is not being fired when I click the button.