2

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.

Steven K.
  • 57
  • 1
  • 3
  • You want to block (dblclick) when do single click right ? – Dimuthu Apr 13 '18 at 03:54
  • How about using `EventEmitter` as `@output` from child which can be monitored in `ngOnChanges(changes: SimpleChanges)` function of `parentComponent`. You cant control parent dblclick event but you can certainly set a `boolean` which can allow execution of `goBack()` function. I hope it has helped – Shashank Vivek Apr 13 '18 at 06:16
  • That's a good idea. Unfortunately, I was imprecise with my question. The child is not an angular component, it's just an HTML button. If I was going to go this route, I would have to make it an actual component. – Steven K. Apr 14 '18 at 02:28

1 Answers1

1

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

Kuba
  • 1,415
  • 1
  • 18
  • 29
  • Awesome, that will work, thanks. I'm assuming I can remove the stopPropagation from the add event then, as there is no (click) event on the parent – Steven K. Apr 14 '18 at 02:31