[feat] Take advantage of passive event listeners #8866

vicb · 2016-05-26T20:52:38Z

/ref https://github.com/WICG/EventListenerOptions

It's a way to declare that preventDefault() is not called by handler and make scrolling smoother.

Needs more investigation if support would be useful in Angular.

The text was updated successfully, but these errors were encountered:

robwormald · 2016-06-02T07:56:23Z

Agree this is a good idea. In a similar vein, a way to run outside of the zone would be useful as well.

Something like:

<div (scroll:{passive:true})="onScroll()"></div>

or

<div (scroll:{zone:false})="onScroll()"></div>

aleksandar-b · 2016-07-28T09:03:40Z

Current status of this?

vicb · 2016-11-29T17:26:38Z

Current status of this / any news

is not very helpful.

What is your use case, how this would help your app would be much more valuable.

piyushgupta1 · 2016-12-26T05:50:46Z

Current Status of this.?
My use case is i am loading few charts with some few thousands data points each but as that is storage operation (Dexie) so the thread hangs till i load all the data . 1 approach is web worker. But the console keep throwing warnings that use passive event listener so i checked out passive event listener which seems to be simpler in long term. I have experimented with host listener for this and did not find any good way to handle events. So is this feature included in future releases?

DzmitryShylovich · 2016-12-26T06:59:27Z

Current Status of this.?

needs design. #13371 (comment)

cuznerdexter · 2017-08-02T13:32:15Z

@nightwnvol I tried your snippet example and it worked in general (removes all the yellow chrome warnings on page load), but when I click on a [routerlink] in my application I now get red errors.

Unable to preventDefault inside passive event listener invocation.

This is a typical link in the component.
<li><a md-button class="md-button" [routerLink]="['messaging/templates']"><i class="nav-icon material-icons">mail</i><span class="nav-text">Message Templates</span></a></li>

nightwnvol · 2017-08-02T22:19:47Z

@cuznerdexter Hi, maybe this can help you.
Unable to preventDefault inside passive event listener invocation.
However, snippet is only a temporary solution (hopefully) until Angular will not support Passive Event Listener.

PierreDuc · 2017-09-13T11:39:17Z

For the time being, I've made a little module which you can use to add event listeners in templates, ng-event-options. It has some limitations, but without hooks into the compiler, this was the easiest way to do it.

jtsom · 2018-01-03T19:41:38Z

As a data point on this, I'm seeing an increase of messages in the Chrome console relating to this:

zone.js:1662 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
customScheduleGlobal	@	zone.js:1662
ZoneDelegate.scheduleTask	@	zone.js:407
Zone.scheduleTask	@	zone.js:232
Zone.scheduleEventTask	@	zone.js:258
(anonymous)	@	zone.js:1841
addHandler	@	events_engine.js:144
(anonymous)	@	events_engine.js:349
iterateEventNames	@	events_engine.js:294
(anonymous)	@	events_engine.js:306
(anonymous)	@	events_engine.js:234
applyForEach	@	events_engine.js:58
(anonymous)	@	events_engine.js:64
initRender.each	@	renderer_base.js:545
applyForEach	@	events_engine.js:62
(anonymous)	@	events_engine.js:71
object.(anonymous function)	@	dependency_injector.js:24
setup	@	wheel.js:20
strategy.(anonymous function)	@	event_registrator.js:30
callMethod	@	events_engine.js:48
addHandler	@	events_engine.js:140
(anonymous)	@	events_engine.js:349
iterateEventNames	@	events_engine.js:294
(anonymous)	@	events_engine.js:306
(anonymous)	@	events_engine.js:234
applyForEach	@	events_engine.js:58
(anonymous)	@	events_engine.js:71
object.(anonymous function)	@	dependency_injector.js:24
(anonymous)	@	events_engine.js:473
(anonymous)	@	events_engine.js:234
applyForEach	@	events_engine.js:58
eventsEngine.subscribeGlobal	@	events_engine.js:471
_attachHandlers	@	emitter_registrator.js:34
ctor	@	emitter_registrator.js:25
inheritor	@	class.js:95
(anonymous)	@	emitter_registrator.js:190
../../../../devextreme/events/core/emitter_registrator.js	@	vendor.bundle.js:3240
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	click.js:18
../../../../devextreme/events/click.js	@	vendor.bundle.js:3208
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	accordion.js:13
../../../../devextreme/ui/accordion.js	@	vendor.bundle.js:3528
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	accordion.js:26
../../../../devextreme-angular/ui/accordion.js	@	vendor.bundle.js:384
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	index.js:26
../../../../devextreme-angular/index.js	@	vendor.bundle.js:376
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	app.module.ts:17
../../../../../src/app/app.module.ts	@	main.bundle.js:44
__webpack_require__	@	inline.bundle.js:55
(anonymous)	@	main.ts:4
../../../../../src/main.ts	@	main.bundle.js:188
__webpack_require__	@	inline.bundle.js:55
0	@	main.bundle.js:203
__webpack_require__	@	inline.bundle.js:55
webpackJsonpCallback	@	inline.bundle.js:26
(anonymous)	@	main.bundle.js:1

JiaLiPassion · 2018-01-26T14:42:04Z

I just made a PR to be able to config zone in HostListener,#21681, I would like to make a PR to config passive.
It seems a lot of discussion have been discussed here, #11200, I will try to modify my PR #21681

thorizer · 2018-05-21T02:06:37Z

Current status of this?

arnoldsi-tr · 2018-06-14T12:38:27Z

Please update us on the current status of this feature.

itanex · 2018-09-04T19:34:55Z

@ericcarraway , @JiaLiPassion What is the current status of this feature? What is the expected API for this? Code samples?

Thanks

dharders · 2018-09-14T04:58:30Z

This just bit me hard in iOS 11.3.

With the 11.3 update, Apple enabled passive listeners by default. i.e. {passive: true}

This essentially destroys all drag and drop libraries that rely on preventDefault() to work as expected, which avoids the horrible scroll while dragging using touchmove.

For anyone who doesn't want to waste days like I did, here's a (non-webworker friendly) workaround:

   // Add as early as possible in your code, in a service etc
   
    dragEnabled = false;

    window.addEventListener('touchmove', (event) => {
        if (!this.dragEnabled)
          return;
        event.preventDefault(); // Prevent scrolling
      },
      { passive: false },       // iOS 11.3 defaults to true
    );

   // now set this.dragEnabled = true when required, and reset on touchend/touchcancel events

I think this feature needs a bump in priority, given iOS 11.3 now defaults to passive listeners.

Smiter15 · 2018-09-24T11:07:50Z

I was able to use this npm package
https://www.npmjs.com/package/default-passive-events
to add passive: true to all my event listeners.

My site now passes the Best Practices 'Does not use passive listeners to improve scrolling performance' test on the lighthouse audit.

Depends if you want this on all your event listeners but can be a good workaround.

pedrovsp · 2018-09-24T13:33:25Z

Will this feature make it possible to create passive event listeners with Renderer2? Do you guys think this is a good idea as well?

raysuelzer · 2018-10-17T23:17:25Z

I think something like this would be nice

@HostListener('touchstart:passive')

m3hm3tk · 2019-04-20T09:35:27Z

Until Angular adds support for event options, ng-event-options is a good solution. If you do not use its options, it falls back to Angular's own EventManagerPlugin. One important thing is that you need to import NgEventOptionsModule after Angular imports.

kmturley · 2019-09-20T22:30:29Z

Google Lighthouse reports not using { passive: true } as a performance issue...

Uses Passive Event Listeners to Improve Scrolling Performance:
https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

will you take this seriously now?

SansDK · 2019-12-09T13:52:58Z

This issue is > 3 years old.
What's the current status of this?

AaronLavers · 2019-12-17T08:52:41Z

Keen to know if the Angular team is taking steps to resolve this issue?
Angular 8.2.9, I have multiple warnings in Chrome such as:

zone-evergreen.js.pre-build-optimizer.js:1742 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

penfold · 2020-11-19T11:25:56Z

Using (scroll) but it should be passive. Seeing issues in Lighthouse reports.

Is there any visibility of the priority of issues in Opertion Byelog?

Thanks

JamesIves · 2021-05-11T21:19:39Z

Was there any update regarding this? Looking into ways to improve Lighthouse scores and this is a big one I'm hoping to check off the list. 😭

CiernaOvca · 2022-01-27T15:31:35Z

Anything new with this issue?

liesahead · 2022-06-21T08:33:19Z

Some update? After 6 years 🤔

misha98857 · 2022-11-19T23:48:57Z

I don't see a link to angular built-in solution for passive listeners. We can configure this by zone-flags. https://angular.io/guide/event-binding#binding-to-passive-events

… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866

JeanMeche · 2023-04-29T21:04:02Z

I've proposed an EventManagerPlugin in #50082 to handle passive event listeners.

Even if the PR doesn't move forward, you'll have the code to implement it in your own project 😊

… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866

AnwarMEQOR · 2023-11-11T00:05:08Z

This might help if you are trying to bind to an event: angular.io

…g <some> event. angular/angular#8866 (comment) Angular doesn't seem to handle passive events well. Use package `default-passive-events` as a workaround. Signed-off-by: 陳鈞 <jim60105@gmail.com>

johncrim · 2023-11-29T19:50:47Z

This is another useful way to hook up passive event listeners:

https://github.com/Tinkoff/ng-event-plugins

It would be nice if it was more automatic, eg if the ng compiler could always do the optimal thing based on whether the handler function possibly prevents default or stops propagation.

vicb added the state: Needs Design label May 26, 2016

vicb added the area: core Issues related to the framework runtime label Dec 29, 2016

tbosch added the feature Issue that requests a new feature label Apr 10, 2017

justjavac mentioned this issue Jul 4, 2017

addEventListener 的第三个参数 justjavac/the-front-end-knowledge-you-may-not-know#6

Open

This was referenced Aug 24, 2017

Use passive listeners to improve scrolling performance angular/zone.js#790

Closed

Lighthouse complains use passive listeners zloirock/core-js#305

Closed

ngbot bot added this to the Backlog milestone Jan 23, 2018

trotyl mentioned this issue Jan 26, 2018

Angular should natively support passive event listeners #21801

Closed

IgorMinar added the hotlist: google label Jan 26, 2018

JiaLiPassion mentioned this issue Jan 26, 2018

WIP(compiler): fix #19878, can config zone/once/passive/capture in template/HostListener decorator #21681

Closed

3 tasks

ericmartinezr mentioned this issue Feb 10, 2018

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. #22152

Closed

briancodes mentioned this issue May 14, 2018

Add @Input to enable Passive Event Listeners briancodes/ngx-interact-outside#2

Open

pedrovsp mentioned this issue Sep 24, 2018

Google chrome violations related to gridster2 tiberiuzuld/angular-gridster2#420

Open

krokofant mentioned this issue Mar 25, 2019

autocomplete option click may not work in some cases NG-ZORRO/ng-zorro-antd#3158

Closed

Nolanus mentioned this issue May 31, 2019

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Nolanus/ngx-page-scroll#303

Open

GuessWhoSamFoo mentioned this issue Oct 4, 2019

Unable to preventDefault inside passive event listener invocation vmware-archive/octant#325

Closed

JiaLiPassion mentioned this issue Dec 19, 2019

feat: support passive events by define global variables in zone.js config file #34503

Closed

14 tasks

JiaLiPassion self-assigned this Dec 19, 2019

pkozlowski-opensource added the core: event listeners label Mar 6, 2020

jameesjohn mentioned this issue Apr 27, 2020

Remove event listeners affecting scrolling performance oppia/oppia#8833

Closed

angular-robot bot added the feature: under consideration Feature request for which voting has completed and the request is now under consideration label May 21, 2021

alxhub added this to Inbox in Feature Requests via automation Sep 23, 2021

alxhub moved this from Inbox to Proposed Projects in Feature Requests Sep 23, 2021

jherman mentioned this issue Oct 20, 2021

Scrolling in interactive terminal UI (FAR Manager) xtermjs/xterm.js#3514

Closed

damiencuvillier mentioned this issue Jan 10, 2022

Chrome Warning about touchstart event AnthonyNahas/ngx-long-press2#1

Closed

JeanMeche added a commit to JeanMeche/angular that referenced this issue Apr 29, 2023

feat(platform-browser): EventManagerPlugin to support passive event…

4ab2e35

… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866

JeanMeche mentioned this issue Apr 29, 2023

feat(platform-browser): EventManagerPlugin to support passive event listeners #50082

Closed

2 tasks

JeanMeche added a commit to JeanMeche/angular that referenced this issue Apr 29, 2023

feat(platform-browser): EventManagerPlugin to support passive event…

6e6a9cc

… listeners. Usage : use `(scroll.passive)` as event binding. Fixes angular#8866

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] Take advantage of passive event listeners #8866

[feat] Take advantage of passive event listeners #8866

vicb commented May 26, 2016

robwormald commented Jun 2, 2016

aleksandar-b commented Jul 28, 2016

vicb commented Nov 29, 2016 •

edited

Loading

piyushgupta1 commented Dec 26, 2016 •

edited

Loading

DzmitryShylovich commented Dec 26, 2016

cuznerdexter commented Aug 2, 2017

nightwnvol commented Aug 2, 2017 •

edited

Loading

PierreDuc commented Sep 13, 2017

jtsom commented Jan 3, 2018

JiaLiPassion commented Jan 26, 2018

thorizer commented May 21, 2018

arnoldsi-tr commented Jun 14, 2018

itanex commented Sep 4, 2018

dharders commented Sep 14, 2018

Smiter15 commented Sep 24, 2018

pedrovsp commented Sep 24, 2018

raysuelzer commented Oct 17, 2018

m3hm3tk commented Apr 20, 2019 •

edited

Loading

kmturley commented Sep 20, 2019

SansDK commented Dec 9, 2019 •

edited

Loading

AaronLavers commented Dec 17, 2019 •

edited

Loading

penfold commented Nov 19, 2020

JamesIves commented May 11, 2021 •

edited

Loading

CiernaOvca commented Jan 27, 2022

liesahead commented Jun 21, 2022 •

edited

Loading

misha98857 commented Nov 19, 2022

JeanMeche commented Apr 29, 2023 •

edited

Loading

AnwarMEQOR commented Nov 11, 2023

johncrim commented Nov 29, 2023

[feat] Take advantage of passive event listeners #8866

[feat] Take advantage of passive event listeners #8866

Comments

vicb commented May 26, 2016

robwormald commented Jun 2, 2016

aleksandar-b commented Jul 28, 2016

vicb commented Nov 29, 2016 • edited Loading

piyushgupta1 commented Dec 26, 2016 • edited Loading

DzmitryShylovich commented Dec 26, 2016

cuznerdexter commented Aug 2, 2017

nightwnvol commented Aug 2, 2017 • edited Loading

PierreDuc commented Sep 13, 2017

jtsom commented Jan 3, 2018

JiaLiPassion commented Jan 26, 2018

thorizer commented May 21, 2018

arnoldsi-tr commented Jun 14, 2018

itanex commented Sep 4, 2018

dharders commented Sep 14, 2018

Smiter15 commented Sep 24, 2018

pedrovsp commented Sep 24, 2018

raysuelzer commented Oct 17, 2018

m3hm3tk commented Apr 20, 2019 • edited Loading

kmturley commented Sep 20, 2019

SansDK commented Dec 9, 2019 • edited Loading

AaronLavers commented Dec 17, 2019 • edited Loading

penfold commented Nov 19, 2020

JamesIves commented May 11, 2021 • edited Loading

CiernaOvca commented Jan 27, 2022

liesahead commented Jun 21, 2022 • edited Loading

misha98857 commented Nov 19, 2022

JeanMeche commented Apr 29, 2023 • edited Loading

AnwarMEQOR commented Nov 11, 2023

johncrim commented Nov 29, 2023

vicb commented Nov 29, 2016 •

edited

Loading

piyushgupta1 commented Dec 26, 2016 •

edited

Loading

nightwnvol commented Aug 2, 2017 •

edited

Loading

m3hm3tk commented Apr 20, 2019 •

edited

Loading

SansDK commented Dec 9, 2019 •

edited

Loading

AaronLavers commented Dec 17, 2019 •

edited

Loading

JamesIves commented May 11, 2021 •

edited

Loading

liesahead commented Jun 21, 2022 •

edited

Loading

JeanMeche commented Apr 29, 2023 •

edited

Loading