0

In the following example I have two shapes, a rectangle and a semitransparent circle: http://jsfiddle.net/cequiel/zZ22s/

var stage = new Kinetic.Stage({
    container: 'canvas',
    width: 800,
    height: 600
});
var layer = new Kinetic.Layer();

// adds a rectangle
var rect = new Kinetic.Rect({
    x: 100,
    y: 50,
    width: 200,
    height: 150,
    fill: 'yellow',
    stroke: 'black'
});
rect.on('mousedown', function() {
    $('#text').text('mouse down');
}).on('mouseup', function() {
    $('#text').text('mouse up');
}).on('mouseenter', function() {
    $('body').css('cursor', 'pointer');
    $('#text').text('mouse enter');
}).on('mouseleave', function() {
    $('body').css('cursor', 'default');
    $('#text').text('mouse leave');
});
layer.add(rect);

// adds a semitransparent circle
var circ = new Kinetic.Circle({
    x: 300,
    y: 125,
    radius: 60,
    fill: 'green',
    stroke: 'black',
    opacity: 0.2,
    locked: true
});
layer.add(circ);

stage.add(layer);

The rectangle captures the mouse down, up, enter and leave events. But when the mouse is over the circle, the rectangle doesn't receive any event. And this is fine. But, how could I avoid this? I mean, how could I make the circle "invisible" to the mouse events? I'm looking for something similar to the 'mouseEnabled' property defined in AS3: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#mouseEnabled

Thanks.

Cequiel
  • 3,505
  • 6
  • 27
  • 44

1 Answers1

1

You can instruct any shape to temporarily stop listening for events like this:

myShape.setListening(false);
markE
  • 102,905
  • 11
  • 164
  • 176