Making an Object "transparent" for Mouse Events?

Question

I'm working on a project with HTML5 Canvas and KineticJS. A half-transparent overlay (a KineticJS group or layer) is placed all over the scene. The problem is: Mouse events bound to KineticJS objects under this overlay are not processed.

How can I make this overlay (or any other object) "transparent" to mouse events?

NOTE: The question is only about the Canvas, there are no other HTML elements interfering to it. (To make clear what was asked below.)

Arethaarethusa

Answer 1

Assuming you mean HTML elements are placed over your canvas, try looking at pointer events: pointer events at MDN

e.g.

#foo {
    pointer-events:none;
}

Heshum

I would use this also, but please be aware that it has compatibility issues across browsers. – Lyte

Thx for your answer. But, as I edited in my initial post, I do not mean any HTML elements. – Arethaarethusa

Ah OK, that makes sense. Looking at the docs I can't immediately see any way to do this using their API; does this overlay need to be in the same canvas element as the rest of the scene? – Heshum

Answer 2

Yes you can click-through top nodes to the bottom nodes similar to pointer-events:none

You just tell your top object not to listen to events…like this:

myTopObject.setListening(false);

Now all mouse events will bubble down to the bottom object.

See this SO answer for code and Fiddle: pointer-events in Kineticjs

Peppi

Is there any way to do this with jQuery or regular Javascript? pointer-events: none is not a solution for me either. – Vehemence

Answer 3

Setting opacity in layer level also sets opacity into object level.

layer.setOpacity(0.1);

"Mouse events bound to KineticJS objects under this overlay are not processed."

Hmm, mouse events bound to object are processed although your overlay(layer) has opacity of 0. this seems working fine, I don't know what you are into.

"How can I make this overlay (or any other object) "transparent" to mouse events?" For me, mouseover/mouseout both work fine on layer level to make it half transparent.

  layer.on('mouseover', function() {
     this.setOpacity(0.5);
     this.draw();
  });

  layer.on('mouseout', function() {
     this.setOpacity(1);
     this.draw();
  });

Are you missing layer.draw()?

Precipitancy