CODEWITHSUNDEEP
javascripthtmlcanvas
fox
fox

Reputation: 387

Events not working on canvas

I've created a canvas. I want to trigger some events when the mouse enters and leaves the canvas. My code is not working. Did I missed something?

var d = dojo.create(
            "canvas",
            {
                width: 0,
                height: 0,
                style: {border: "1px solid #3399ff", position: "absolute", visibility:"hidden"},
                ondragenter: vp.handleDrag,
                ondragover: vp.handleDrag,
                ondrop: handleDrop
            }
    );
d.addEventListener("mouseout", function(evt)
    {    //code inside function     });

Upvotes: 0

Views: 113

Answers (1)

apsillers
apsillers

Reputation: 116050

Your code works fine if you:

  1. Append your canvas to the DOM (maybe you do that in your real code, but your example is incomplete).

  2. Remove visibiltiy: "hidden", since mouse events will not fire for a hidden element.

I'd also suggest making your canvas bigger than 0-by-0, but your code will still technically work if you implement the other two points, because the canvas has a border. I created a functional jsFiddle here.

Upvotes: 1

Related Questions