No way to cancel mouse events using HostListener

This issue has been created 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-09-30
Star Count 84080
Watcher Count 3064
Fork Count 22235
Issue Count 1197

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Using signals does not trigger re-render after updating the signal 5 2022-09-11 2022-09-25
webp/decode.h file not found 0 2021-09-21 2022-09-26
Invalid ConstraintValidator annotation on CurrencyValidator 1 2022-02-15 2022-09-27
[Bug] The character's [Seat of Life] talent+3 does not work 【角色的【命之座】的天赋+3不生效】 1 2022-09-16 2022-09-22
Add `AtataContext Context` property to `UIComponent` 0 2021-10-21 2022-09-26
Add idownvotedbecau.se/requestingquickanswers 1 2021-05-13 2022-09-10
Google translate should not be adviced 1 2022-01-05 2022-08-18
Question: legacy mosquitto hasher support 9 2020-11-05 2022-09-26
Files backend `read` keyword in ACL not working 5 2020-11-07 2022-09-26
Help coding in a custom main menu music option 1 2022-05-21 2022-09-26
Highlighting bug 0 2021-01-07 2022-01-16
Question about categorical channels in LSTM input features 0 2021-05-04 2022-09-26
Stuff to do 0 2021-06-08 2021-12-22
About training time 2 2021-09-10 2021-11-22
[use case] Ethereum Light Client 6 2018-02-21 2022-09-06
Centralized seed services, inspired by WebSeeds 21 2018-11-30 2022-09-15
Citation with ZENODO 0 2022-05-06 2022-09-26
datacite: `contributors` field serialization skipped 0 2022-05-17 2022-09-26
Flaky tests 1 2021-08-26 2022-01-12
Updating transitive UnitsNet dependency cause wrong unit 11 2022-03-22 2022-09-14
Wert Ausgabe von 1 auf wahr ändern V2.07 4 2020-12-30 2022-07-21
text2command Seite lässt sich nicht öffnen 10 2020-10-02 2022-09-26
ArcFace model query 45 2019-05-03 2022-01-16
Dumping objects outputs [object Object] 10 2016-07-13 2022-09-02
[BUG] REST Connector timeseries-key bug 1 2022-04-18 2022-09-26
URLs are sanitized with http, not https 1 2021-03-11 2022-09-15
[Feature Request] Include alias name in the "Delete alias" dialog box 1 2021-10-22 2022-09-12
Support for Jura Coffee Machines 0 2022-01-10 2022-09-29
Multiple FlexBox layouts in a container can cause resize loop 5 2021-09-01 2022-08-18
SLA for Parallelism Provision 0 2022-07-21 2022-08-13
"SyntaxError: await is only valid in async function" issue in current master version 1 2022-03-10 2022-08-18
The system cannot find the file specified. (os error 2) while assembling Android release 9 2022-08-31 2022-09-29
[BUG] Wrong behaviour of `npm version` inside workspaces 5 2021-11-08 2022-09-28
Can I change Txpower by set “AD9361_RADIO_ON_TX_ATT” in different value? 3 2021-12-05 2022-09-17
precompilation time (v6.19.1) and a lot of warnings related to missing libraries 2 2022-07-26 2022-09-29
Parsing units has a rounding error? 2 2022-01-15 2022-09-28
GIF with local color table may not display correctly? 8 2021-03-04 2022-09-19
About advertisement! 2 2021-10-18 2022-09-28
[Question] Support for tiered design system 1 2022-08-15 2022-09-09
反序列化时传new ParameterizedType()会导致OOM 0 2021-10-14 2022-09-22
How to convert video chunks created by shaka streamer to a tiny video that can be played using ffmpeg? 5 2021-10-11 2022-09-20
怎么按照索引取出对应位置的张量?? 4 2022-01-01 2022-01-23
merge from twitter/commons 1 2017-02-26 2022-09-09
Configurable scroll padding 1 2021-08-19 2022-09-18
Certain classes are never tree-shaken out 2 2021-10-11 2022-08-27
No Callback when we click power spinner? And if no callback then at a time 2 power spinner open how we dismiss without callback? 2 2021-04-20 2022-09-18
[QUESTION] 升级到2.2后interface不会被扫描 2 2021-09-14 2022-08-31
Missing completion of `kubectl config set-context` 4 2014-09-03 2022-09-29
PHP Fatal error: Uncaught Error: Class "Phalcon\Config" not found in C:\Users\....\AppData\Roaming\Composer\vendor\phalcon\devtools\src\Builder\Component\AbstractComponent.php:48 0 2022-09-27 2022-09-22
chore(Menu): use React.forwardRef() 0 2021-07-27 2022-09-04