Skip to content

Instantly share code, notes, and snippets.

@robwormald
Last active September 2, 2019 10:58
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save robwormald/cb12881da7cbc73cf65dd042fad7b0fb to your computer and use it in GitHub Desktop.
Save robwormald/cb12881da7cbc73cf65dd042fad7b0fb to your computer and use it in GitHub Desktop.
const BLACKLISTED_ZONE_EVENTS: string[] = [
'addEventListener:mouseenter',
'addEventListener:mouseleave',
'addEventListener:mousemove',
'addEventListener:mouseout',
'addEventListener:mouseover',
'addEventListener:mousewheel',
'addEventListener:scroll',
'requestAnimationFrame',
];
export const blacklistZone = Zone.current.fork({
name: 'blacklist',
onScheduleTask: (delegate: ZoneDelegate, current: Zone, target: Zone,
task: Task): Task => {
// Blacklist scroll, mouse, and request animation frame events.
if (task.type === 'eventTask' &&
BLACKLISTED_ZONE_EVENTS.some(
(name) => task.source.indexOf(name) > -1)) {
task.cancelScheduleRequest();
// Schedule task in root zone, note Zone.root != target,
// "target" Zone is Angular. Scheduling a task within Zone.root will
// prevent the infinite digest cycle from appearing.
return Zone.root.scheduleTask(task);
} else {
return delegate.scheduleTask(target, task);
}
}
});
import {blacklistZone} from './blacklist'
blacklistZone.run(() => {
platformBrowser().bootstrapModuleFactory(...)
})
@sebastiangug
Copy link

I haven't yet realised the full extent of consequences from doing this, but so far it's been a life-saver for d3 applications in angular with hundreds of listeners on hundreds of small dots and charts.

@Malex
Copy link

Malex commented Sep 2, 2019

Note that it breaks matTooltip support. If you need tooltips, keep the enter over and leave inside zone

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