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.)

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;
}

Answer 2

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()?

Answer 3

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