Event propagation continuing always

[Chris Derossi]

Example code with test case: http://plnkr.co/edit/WbjneiG1G3oWf20HaYaq?p=preview

I have nested elements and if someone clicks on an inner element, I want to handle the click and stop it from propagating to the outer elements. I also have a (click) binding on the outer element which does something different. The handler for the click on the outer element should only activate if the user didn't click on one of the inner elements.

The click in the outer element works great.

However, a click on the inner element first calls the (click) binding for the inner element, then calls the (click) binding for the outer element. This happens whether the method bound to (click) for the inner element returns true, false, or has no return statement. This seems to directly contradict what's documented here https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding.

Any ideas what I'm missing?

[michael corbridge]

Chris,

Here's what I did:

-------------------------------------------------------------------------------------------------

<div style="width: 200px; height: 200px; border: 1px solid red;" (click)="onClick($event)"> <----- make sure your event is passing the MouseEvent object to your handler

onClick(event:MouseEvent) {
  event.stopPropagation(); // <-------------- stop that sucker right in it's tracks!
  this.counter++;
  console.log("Clicked " + this.counter + " times! ");
  this.msgs += "\nClicked " + this.counter + " times! ";
  return false;
}

I hope that does what you are looking for.

 - michael

[Chris Derossi]

Michael,

That works, thanks. 

Hopefully the Angular2 bug will get fixed, or maybe the code that's supposed to handle the return value will get taken out and the canonical approach will be to call event.stopPropagation().

_chris