CODEWITHSUNDEEP
angularclickstoppropagation
Steven K.
Steven K.

Reputation: 57

Angular Stop Propagation of Different Event

In my Angular 4 application, I have a parent component with a (dblclick) handler and a child component with a (click) handler.

component.html

<mat-list (dblclick)="goBack()">
    <button (click)="add($event)"> Add </button>
</mat-list>

component.ts

add(event){
    event.stopPropagation();
    doSomething();
}

However, from what I've seen, stopPropagation only stops events of the same type. In this example, if someone double clicks the button, it calls the goBack() function. If I change the parent component's event to a single (click) event, the propagation is stopped.

Is there anyway for me to block a (dblclick) in parent through the child's (click) event?

Thanks in advance.

Upvotes: 2

Views: 7094

Answers (1)

Kuba
Kuba

Reputation: 1455

You can try something like below. I think it's the simplest way.

event.target always refers to highest layer inside parent where event is assigned. Instead of nodeName, you can compare target by class, or id as well to be sure its a right button.

<mat-list (dblclick)="goBack($event)">
    <button (click)="add($event)"> Add </button>
</mat-list>

goBack(event){
    if(event.target.nodeName === "BUTTON"){
       return;
    }
    doSomething();
}

add(event){
    event.stopPropagation();
    doSomething();
}

Here you have working plnkr

Upvotes: 2

Related Questions