fix(event): in IE, fix #1128, angular#589, pointer event will be tran…

…sformed in IE
JiaLiPassion · Aug 26, 2018 · 7f589e0 · 7f589e0
1 parent 9c96904
commit 7f589e0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/lib/common/events.ts b/lib/common/events.ts
@@ -10,14 +10,26 @@
  * @suppress {missingRequire}
  */
 
-import {ADD_EVENT_LISTENER_STR, attachOriginToPatched, FALSE_STR, ObjectGetPrototypeOf, REMOVE_EVENT_LISTENER_STR, TRUE_STR, ZONE_SYMBOL_PREFIX, zoneSymbol} from './utils';
+import {ADD_EVENT_LISTENER_STR, attachOriginToPatched, FALSE_STR, isIEOrEdge, ObjectGetPrototypeOf, REMOVE_EVENT_LISTENER_STR, TRUE_STR, ZONE_SYMBOL_PREFIX, zoneSymbol} from './utils';
 
 /** @internal **/
 interface EventTaskData extends TaskData {
   // use global callback or not
   readonly useG?: boolean;
 }
 
+const pointerEventsMap: {[key: string]: string} = {
+  'pointercancel': 'MSPointerCancel',
+  'pointerdown': 'MSPointerDown',
+  'pointerenter': 'MSPointerEnter',
+  'pointerhover': 'MSPointerHover',
+  'pointerleave': 'MSPointerLeave',
+  'pointermove': 'MSPointerMove',
+  'pointerout': 'MSPointerOut',
+  'pointerover': 'MSPointerOver',
+  'pointerup': 'MSPointerUp'
+};
+
 let passiveSupported = false;
 
 if (typeof window !== 'undefined') {
@@ -122,7 +134,12 @@ export function patchEventTarget(
     // event.target is needed for Samsung TV and SourceBuffer
     // || global is needed https://github.com/angular/zone.js/issues/190
     const target: any = this || event.target || _global;
-    const tasks = target[zoneSymbolEventNames[event.type][FALSE_STR]];
+    let tasks = target[zoneSymbolEventNames[event.type][FALSE_STR]];
+    if (!tasks && isIEOrEdge) {
+      const pointerMappedEvent = pointerEventsMap[event.type];
+      tasks =
+          pointerMappedEvent ? target[zoneSymbolEventNames[pointerMappedEvent]][FALSE_STR] : tasks;
+    }
     if (tasks) {
       // invoke all tasks which attached to current target with given event.type and capture = false
       // for performance concern, if task.length === 1, just invoke
@@ -154,7 +171,12 @@ export function patchEventTarget(
     // event.target is needed for Samsung TV and SourceBuffer
     // || global is needed https://github.com/angular/zone.js/issues/190
     const target: any = this || event.target || _global;
-    const tasks = target[zoneSymbolEventNames[event.type][TRUE_STR]];
+    let tasks = target[zoneSymbolEventNames[event.type][TRUE_STR]];
+    if (!tasks && isIEOrEdge) {
+      const pointerMappedEvent = pointerEventsMap[event.type];
+      tasks =
+          pointerMappedEvent ? target[zoneSymbolEventNames[pointerMappedEvent]][TRUE_STR] : tasks;
+    }
     if (tasks) {
       // invoke all tasks which attached to current target with given event.type and capture = false
       // for performance concern, if task.length === 1, just invoke

diff --git a/test/browser/browser.spec.ts b/test/browser/browser.spec.ts
@@ -2662,5 +2662,44 @@ describe('Zone', function() {
                });
              }));
     });
+
+    describe(
+        'pointer event in IE',
+        ifEnvSupports(
+            () => {
+              return getIEVersion() === 10;
+            },
+            () => {
+              const pointerEventsMap: {[key: string]: string} = {
+                'pointercancel': 'MSPointerCancel',
+                'pointerdown': 'MSPointerDown',
+                'pointerenter': 'MSPointerEnter',
+                'pointerhover': 'MSPointerHover',
+                'pointerleave': 'MSPointerLeave',
+                'pointermove': 'MSPointerMove',
+                'pointerout': 'MSPointerOut',
+                'pointerover': 'MSPointerOver',
+                'pointerup': 'MSPointerUp'
+              };
+              let div: HTMLDivElement;
+              beforeEach(() => {
+                div = document.createElement('div');
+                document.body.appendChild(div);
+              });
+              afterEach(() => {
+                document.body.removeChild(div);
+              });
+              Object.keys(pointerEventsMap).forEach(key => {
+                it(`${key} should be registered as ${pointerEventsMap[key]}`, (done: DoneFn) => {
+                  div.addEventListener(key, (event: any) => {
+                    expect(event.type).toEqual(pointerEventsMap[key]);
+                    done();
+                  });
+                  const evt = document.createEvent('Event');
+                  evt.initEvent(key, true, true);
+                  div.dispatchEvent(evt);
+                });
+              });
+            }));
   });
 });