Javascript click wont fire until after two clicks

Question

I'm using kinetic js and using a click event to highlight an element when clicked on. I have an issue where the event won't fire until the second click.

function Canvas(){
  this.stage;
  this.backgroundLayer;
}

Canvas.prototype.init = function(w, h){
  this.stage = new Kinetic.Stage({
    container: 'container',
    width: w,
    height: h
  });

  this.backgroundLayer = new Kinetic.Layer();
  this.stage.add(this.backgroundLayer);
  this.addLayerListeners();
}

Canvas.prototype.addLayerListeners = function(){
  this.backgroundLayer.on('click',function(evt){
    var shape = evt.targetNode;
    shape.stroke('#00ff00');
    shape.strokeWidth('5');
  });
}

Is this normal behavior? Otherwise, what am I doing incorrectly?

Answer 1

There has to be more code than I'm seeing. For instance, in the event listener you'd have to have a shape.draw(), layer.draw(), or stage.draw() in there somewhere.

I use a similar approach in an onclick (select) function :

shape.setStroke('black');
shape.setStrokeWidth(4);
shape.enableStroke();
shape.draw();

And in the remove stroke (deselect) function :

shape.disableStroke();
shape.draw();