New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Take advantage of passive event listeners #8866

Open
vicb opened this Issue May 26, 2016 · 14 comments

Comments

Projects
None yet
@vicb
Contributor

vicb commented May 26, 2016

/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.

@robwormald

This comment has been minimized.

Show comment
Hide comment
@robwormald

robwormald Jun 2, 2016

Member

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>
Member

robwormald commented Jun 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@aleksandar-b

aleksandar-b Jul 28, 2016

Current status of this?

aleksandar-b commented Jul 28, 2016

Current status of this?

@vicb

This comment has been minimized.

Show comment
Hide comment
@vicb

vicb Nov 29, 2016

Contributor

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.

Contributor

vicb commented Nov 29, 2016

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

This comment has been minimized.

Show comment
Hide comment
@piyushgupta1

piyushgupta1 Dec 26, 2016

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?

piyushgupta1 commented Dec 26, 2016

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

This comment has been minimized.

Show comment
Hide comment
@DzmitryShylovich

DzmitryShylovich Dec 26, 2016

Contributor

Current Status of this.?

needs design. #13371 (comment)

Contributor

DzmitryShylovich commented Dec 26, 2016

Current Status of this.?

needs design. #13371 (comment)

@cuznerdexter

This comment has been minimized.

Show comment
Hide comment
@cuznerdexter

cuznerdexter Aug 2, 2017

@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>

cuznerdexter commented Aug 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@NightWnvol

NightWnvol Aug 2, 2017

@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.

NightWnvol commented Aug 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@PierreDuc

PierreDuc Sep 13, 2017

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.

PierreDuc commented Sep 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jtsom

jtsom Jan 3, 2018

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

jtsom commented Jan 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@JiaLiPassion

JiaLiPassion Jan 26, 2018

Contributor

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

Contributor

JiaLiPassion commented Jan 26, 2018

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

This comment has been minimized.

Show comment
Hide comment
@thorizer

thorizer May 21, 2018

Current status of this?

thorizer commented May 21, 2018

Current status of this?

@arnoldsi

This comment has been minimized.

Show comment
Hide comment
@arnoldsi

arnoldsi Jun 14, 2018

Please update us on the current status of this feature.

arnoldsi commented Jun 14, 2018

Please update us on the current status of this feature.

@itanex

This comment has been minimized.

Show comment
Hide comment
@itanex

itanex Sep 4, 2018

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

Thanks

itanex commented Sep 4, 2018

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

Thanks

@dharders

This comment has been minimized.

Show comment
Hide comment
@dharders

dharders Sep 14, 2018

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.

dharders commented Sep 14, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment