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
On Friday, January 15, 2016 at 1:33:13 PM UTC-5, Chris Derossi wrote:
>
> 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?
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
