No way to cancel mouse events using HostListener

This issue has been tracked since 2022-09-16.

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

As per the documentation:

If the handler method returns false, applies preventDefault on the bound element.

This can be verified by, say, returning false from a keydown handler (not shown), where the key event is suppressed before it even gets to the input control.

For mouse events (I've tested click, mouseDown, mouseUp, and mouseOver), the default behavior executes regardless.

For example, in my component:

@HostListener('click', ['$event']) clickHandler(event: Event) {
  console.log('From hello component', event);
  return false;
}

Then, if I assign an event to that component's click output:

<hello (click)="logClickEvent($event)" name="{{ name }}"></hello>
logClickEvent(event: Event) {
  console.log('From app component', event);
}

Expected:
Only see the console message for the hello component, because returning false should prevent the app component message from running.

Actual:
Both messages appear on the console.

Please provide a link to a minimal reproduction of the bug

https://angular-ivy-4nz5bm.stackblitz.io

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Doesn't seem to be limited to my version, as the linked StackBlitz is on Angular 14.

Here's my environment:

Angular CLI: 13.3.3
Node: 14.19.0
Package Manager: npm 8.6.0
OS: win32 x64

Angular: 13.3.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser       
... platform-browser-dynamic, router, service-worker   

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.3
@angular-devkit/build-angular   13.3.3
@angular-devkit/core            13.3.3
@angular-devkit/schematics      13.3.3
@schematics/angular             13.3.3
ng-packagr                      13.3.1
rxjs                            7.5.5
typescript                      4.5.5

Anything else?

I also tried to work around the issue by calling both stopImmediatePropagation() and preventDefault() inside my handler. Makes no difference.

JoostK wrote this answer on 2022-09-16

preventDefault does not prevent the event from bubbling further up the DOM tree; that would need stopPropagation. stopImmediatePropagation does not work for Angular event listeners, please see #9587 (comment) as to why.

I reopened #9587 as that is still a problem today, but the return false/preventDefault behavior is working as expected.

indraraj26 wrote this answer on 2022-09-16

even with stopPropagation I see both console message

stackblitz

JoostK wrote this answer on 2022-09-16

even with stopPropagation I see both console message

stackblitz

Yes, and for stopPropagation this is correct as it only prevents listeners on ancestor elements being invoked, whereas the event is on the same DOM element here. It's only stopImmediatePropagation that might affect this, but then the order of listeners is relevant and this order is not currently well-defined for Angular in any way, which is what #9587 is for.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date