asked on

Mouse event does non work

I am using Fabric.js. I have next canvas:

 <canvas class="objectcanvas" id="c" width="1060" height="550" style="display:none;"  >

Open in new window

and then I make canvas to become visible when someVariable is set:
function OnSomeCase() {
if (someVariable !== "" ) {
document.getElementById("c").style.display = "block";
}

Once canvas is visible, if I click on canvas:

canvas.on('mouse:down', function(e) {
console.log("eeeeeeeee2");
 }

Open in new window

code does not write anything in console.

If my canvas is visible from the start:

 <canvas class="objectcanvas" id="c" width="1060" height="550"  >

Open in new window

mouse event fires and console displays "eeeeeeeee2".

What must I do to make canvas events to be alive in first case also?

Michael Vasilevsky

Try using event delegation:

document.getElementById("parent-node").addEventListener("mousedown", function(e) {
	if(e.target && e.target.id === "c") {
		console.log("eeeeeeeee2");
	}
});

Open in new window

If you don't have a parent node you can use document.

Ivan Golubar

ASKER

I have all my project code already built.
I want now to make it work only when some user is registered, otherwise canvas has not to be displayed.
I can not now rewrite all code because I want canvas to be hidden on load.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.