fix(event): should pass boolean to addEventListener if not support passive (#1053)

Author: JiaLiPassion

lib/common/events.ts

@@ -18,6 +18,23 @@ interface EventTaskData extends TaskData {
 readonlyuseG?: boolean;
 }
 
+letpassiveSupported=false;
+
+if(typeofwindow!=='undefined'){
+try{
+constoptions=Object.defineProperty({},'passive',{
+get: function(){
+passiveSupported=true;
+}
+});
+
+window.addEventListener('test',options,options);
+window.removeEventListener('test',options,options);
+}catch(err){
+passiveSupported=false;
+}
+}
+
 // an identifier to tell ZoneTask do not create a new invoke closure
 constOPTIMIZED_ZONE_EVENT_TASK_DATA: EventTaskData={
 useG: true
@@ -50,6 +67,8 @@ export interface PatchEventTargetOptions {
 rt?: boolean;
 // event compare handler
 diff?: (task: any,delegate: any)=>boolean;
+// support passive or not
+supportPassive?: boolean;
 }
 
 exportfunctionpatchEventTarget(
@@ -212,12 +231,25 @@ export function patchEventTarget(
 proto[patchOptions.prepend];
 }
 
-constcustomScheduleGlobal=function(){
+functioncheckIsPassive(task: Task){
+if(!passiveSupported&&typeoftaskData.options!=='boolean'&&
+typeoftaskData.options!=='undefined'&&taskData.options!==null){
+// options is a non-null non-undefined object
+// passive is not supported
+// don't pass options as object
+// just pass capture as a boolean
+(taskasany).options=!!taskData.options.capture;
+taskData.options=(taskasany).options;
+}
+}
+
+constcustomScheduleGlobal=function(task: Task){
 // if there is already a task for the eventName + capture,
 // just return, because we use the shared globalZoneAwareCallback here.
 if(taskData.isExisting){
 return;
 }
+checkIsPassive(task);
 returnnativeAddEventListener.call(
 taskData.target,taskData.eventName,
 taskData.capture ? globalZoneAwareCaptureCallback : globalZoneAwareCallback,
@@ -265,6 +297,7 @@ export function patchEventTarget(
 };
 
 constcustomScheduleNonGlobal=function(task: Task){
+checkIsPassive(task);
 returnnativeAddEventListener.call(
 taskData.target,taskData.eventName,task.invoke,taskData.options);
 };
@@ -421,7 +454,11 @@ export function patchEventTarget(
 if(once){
 options.once=true;
 }
-task.options=options;
+if(!(!passiveSupported&&typeoftask.options==='boolean')){
+// if not support passive, and we pass an option object
+// to addEventListener, we should save the options to task
+task.options=options;
+}
 task.target=target;
 task.capture=capture;
 task.eventName=eventName;

test/browser/browser.spec.ts

@@ -47,8 +47,8 @@ try {
 supportsPassive=true;
 }
 });
-window.addEventListener('test',nullasany,opts);
-window.removeEventListener('test',nullasany,opts);
+window.addEventListener('test',optsasany,opts);
+window.removeEventListener('test',optsasany,opts);
 }catch(e){
 }
 
@@ -75,6 +75,14 @@ function ieOrEdge() {
 
 (ieOrEdgeasany).message='IE/Edge Test';
 
+classTestEventListener{
+logs: string[]=[];
+addEventListener(eventName: string,listener: any,options: any){
+this.logs.push(options);
+}
+removeEventListener(eventName: string,listener: any,options: any){}
+}
+
 describe('Zone',function(){
 constrootZone=Zone.current;
 (Zoneasany)[zoneSymbol('ignoreConsoleErrorUncaughtError')]=true;
@@ -996,6 +1004,46 @@ describe('Zone', function() {
 expect(logs).toEqual(['click']);
 }));
 
+it('should change options to boolean if not support passive',()=>{
+patchEventTarget(window,[TestEventListener.prototype]);
+consttestEventListener=newTestEventListener();
+
+constlistener=function(){};
+testEventListener.addEventListener('test',listener,{passive: true});
+testEventListener.addEventListener('test1',listener,{once: true});
+testEventListener.addEventListener('test2',listener,{capture: true});
+testEventListener.addEventListener('test3',listener,{passive: false});
+testEventListener.addEventListener('test4',listener,{once: false});
+testEventListener.addEventListener('test5',listener,{capture: false});
+if(!supportsPassive){
+expect(testEventListener.logs).toEqual([false,false,true,false,false,false]);
+}else{
+expect(testEventListener.logs).toEqual([
+{passive: true},{once: true},{capture: true},{passive: false},{once: false},
+{capture: false}
+]);
+}
+});
+
+it('should change options to boolean if not support passive on HTMLElement',()=>{
+constlogs: string[]=[];
+constlistener=(e: Event)=>{
+logs.push('clicked');
+};
+
+(buttonasany).addEventListener('click',listener,{once: true});
+button.dispatchEvent(clickEvent);
+expect(logs).toEqual(['clicked']);
+button.dispatchEvent(clickEvent);
+if(supportsPassive){
+expect(logs).toEqual(['clicked']);
+}else{
+expect(logs).toEqual(['clicked','clicked']);
+}
+
+button.removeEventListener('click',listener);
+});
+
 it('should support addEventListener with AddEventListenerOptions passive setting',
 ifEnvSupports(supportEventListenerOptions,function(){
 consthookSpy=jasmine.createSpy('hook');