fix: passive waring

vueComponent · Dec 10, 2020 · 8d1669b · 8d1669b
1 parent 5b8bda9
commit 8d1669b
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 31 deletions.
diff --git a/components/_util/supportsPassive.js b/components/_util/supportsPassive.js
@@ -0,0 +1,13 @@
+// Test via a getter in the options object to see if the passive property is accessed
+let supportsPassive = false;
+try {
+  let opts = Object.defineProperty({}, 'passive', {
+    get() {
+      supportsPassive = true;
+    },
+  });
+  window.addEventListener('testPassive', null, opts);
+  window.removeEventListener('testPassive', null, opts);
+} catch (e) {}
+
+export default supportsPassive;
diff --git a/components/affix/utils.ts b/components/affix/utils.ts
@@ -1,5 +1,6 @@
 import addEventListener from '../vc-util/Dom/addEventListener';
 import { ComponentPublicInstance } from 'vue';
+import supportsPassive from '../_util/supportsPassive';
 
 export type BindElement = HTMLElement | Window | null | undefined;
 export type Rect = ClientRect | DOMRect;
@@ -78,9 +79,14 @@ export function addObserveTarget(
     // Add listener
     TRIGGER_EVENTS.forEach(eventName => {
       entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
-        entity!.affixList.forEach(targetAffix => {
-          (targetAffix as any).lazyUpdatePosition();
-        });
+        entity!.affixList.forEach(
+          targetAffix => {
+            (targetAffix as any).lazyUpdatePosition();
+          },
+          (eventName === 'touchstart' || eventName === 'touchmove') && supportsPassive
+            ? ({ passive: true } as EventListenerOptions)
+            : false,
+        );
       });
     });
   }

diff --git a/components/vc-drawer/src/Drawer.js b/components/vc-drawer/src/Drawer.js
@@ -14,6 +14,7 @@ import {
   transformArguments,
   isNumeric,
 } from './utils';
+import supportsPassive from '../../_util/supportsPassive';
 
 function noop() {}
 
@@ -100,18 +101,7 @@ const Drawer = defineComponent({
   mounted() {
     nextTick(() => {
       if (!windowIsUndefined) {
-        let passiveSupported = false;
-        window.addEventListener(
-          'test',
-          null,
-          Object.defineProperty({}, 'passive', {
-            get: () => {
-              passiveSupported = true;
-              return null;
-            },
-          }),
-        );
-        this.passive = passiveSupported ? { passive: false } : false;
+        this.passive = supportsPassive ? { passive: false } : false;
       }
       const open = this.getOpen();
       if (this.handler || open || this.sFirstEnter) {

diff --git a/components/vc-trigger/Trigger.jsx b/components/vc-trigger/Trigger.jsx
@@ -18,6 +18,7 @@ import BaseMixin from '../_util/BaseMixin';
 import Portal from '../_util/Portal';
 import classNames from '../_util/classNames';
 import { cloneElement } from '../_util/vnode';
+import supportsPassive from '../_util/supportsPassive';
 
 function returnEmptyString() {
   return '';
@@ -165,6 +166,7 @@ export default defineComponent({
             currentDocument,
             'touchstart',
             this.onDocumentClick,
+            supportsPassive ? { passive: true } : false,
           );
         }
         // close popup when trigger type contains 'onContextmenu' and document is scrolling.
@@ -378,7 +380,7 @@ export default defineComponent({
         mouseProps.onMouseleave = self.onPopupMouseleave;
       }
       mouseProps.onMousedown = this.onPopupMouseDown;
-      mouseProps.onTouchstart = this.onPopupMouseDown;
+      mouseProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onPopupMouseDown;
       const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = self;
       const {
         prefixCls,
@@ -603,11 +605,13 @@ export default defineComponent({
     if (this.isClickToHide() || this.isClickToShow()) {
       newChildProps.onClick = this.onClick;
       newChildProps.onMousedown = this.onMousedown;
-      newChildProps.onTouchstart = this.onTouchstart;
+      newChildProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onTouchstart;
     } else {
       newChildProps.onClick = this.createTwoChains('onClick');
       newChildProps.onMousedown = this.createTwoChains('onMousedown');
-      newChildProps.onTouchstart = this.createTwoChains('onTouchstart');
+      newChildProps[
+        supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'
+      ] = this.createTwoChains('onTouchstart');
     }
     if (this.isMouseEnterToShow()) {
       newChildProps.onMouseenter = this.onMouseenter;

diff --git a/components/vc-util/Dom/addEventListener.js b/components/vc-util/Dom/addEventListener.js
@@ -1,6 +1,16 @@
+import supportsPassive from '../../_util/supportsPassive';
+
 export default function addEventListenerWrap(target, eventType, cb, option) {
   if (target.addEventListener) {
-    target.addEventListener(eventType, cb, option);
+    let opt = option;
+    if (
+      opt === undefined &&
+      supportsPassive &&
+      (eventType === 'touchstart' || eventType === 'touchmove' || eventType === 'wheel')
+    ) {
+      opt = { passive: true };
+    }
+    target.addEventListener(eventType, cb, opt);
   }
   return {
     remove: () => {

diff --git a/components/vc-virtual-list/List.tsx b/components/vc-virtual-list/List.tsx
@@ -22,6 +22,7 @@ import useOriginScroll from './hooks/useOriginScroll';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import { RenderFunc, SharedConfig } from './interface';
+import supportsPassive from '../_util/supportsPassive';
 
 const EMPTY_DATA = [];
 
@@ -264,7 +265,11 @@ const List = defineComponent({
     }
     const removeEventListener = () => {
       if (componentRef.value) {
-        componentRef.value.removeEventListener('wheel', onRawWheel);
+        componentRef.value.removeEventListener(
+          'wheel',
+          onRawWheel,
+          supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+        );
         componentRef.value.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
         componentRef.value.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
       }
@@ -273,7 +278,11 @@ const List = defineComponent({
       nextTick(() => {
         if (componentRef.value) {
           removeEventListener();
-          componentRef.value.addEventListener('wheel', onRawWheel);
+          componentRef.value.addEventListener(
+            'wheel',
+            onRawWheel,
+            supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+          );
           componentRef.value.addEventListener('DOMMouseScroll', onFireFoxScroll as any);
           componentRef.value.addEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
         }

diff --git a/components/vc-virtual-list/ScrollBar.tsx b/components/vc-virtual-list/ScrollBar.tsx
@@ -2,6 +2,7 @@ import { defineComponent, PropType, reactive } from 'vue';
 import classNames from '../_util/classNames';
 import createRef from '../_util/createRef';
 import raf from '../_util/raf';
+import supportsPassive from '../_util/supportsPassive';
 import PropTypes from '../_util/vue-types';
 
 const MIN_SIZE = 20;
@@ -60,8 +61,16 @@ export default defineComponent({
   },
 
   mounted() {
-    this.scrollbarRef.current.addEventListener('touchstart', this.onScrollbarTouchStart);
-    this.thumbRef.current.addEventListener('touchstart', this.onMouseDown);
+    this.scrollbarRef.current.addEventListener(
+      'touchstart',
+      this.onScrollbarTouchStart,
+      supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+    );
+    this.thumbRef.current.addEventListener(
+      'touchstart',
+      this.onMouseDown,
+      supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+    );
   },
 
   beforeUnmount() {
@@ -92,17 +101,33 @@ export default defineComponent({
       window.addEventListener('mousemove', this.onMouseMove);
       window.addEventListener('mouseup', this.onMouseUp);
 
-      this.thumbRef.current.addEventListener('touchmove', this.onMouseMove);
+      this.thumbRef.current.addEventListener(
+        'touchmove',
+        this.onMouseMove,
+        supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+      );
       this.thumbRef.current.addEventListener('touchend', this.onMouseUp);
     },
 
     removeEvents() {
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
 
-      this.scrollbarRef.current.removeEventListener('touchstart', this.onScrollbarTouchStart);
-      this.thumbRef.current.removeEventListener('touchstart', this.onMouseDown);
-      this.thumbRef.current.removeEventListener('touchmove', this.onMouseMove);
+      this.scrollbarRef.current.removeEventListener(
+        'touchstart',
+        this.onScrollbarTouchStart,
+        supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+      );
+      this.thumbRef.current.removeEventListener(
+        'touchstart',
+        this.onMouseDown,
+        supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+      );
+      this.thumbRef.current.removeEventListener(
+        'touchmove',
+        this.onMouseMove,
+        supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
+      );
       this.thumbRef.current.removeEventListener('touchend', this.onMouseUp);
 
       raf.cancel(this.moveRaf);

diff --git a/components/vc-virtual-list/hooks/useMobileTouchMove.ts b/components/vc-virtual-list/hooks/useMobileTouchMove.ts
@@ -1,3 +1,4 @@
+import supportsPassive from '../../_util/supportsPassive';
 import { watch, Ref } from 'vue';
 
 const SMOOTH_PTG = 14 / 15;
@@ -17,7 +18,15 @@ export default function useMobileTouchMove(
 
   const cleanUpEvents = () => {
     if (element) {
-      element.removeEventListener('touchmove', onTouchMove);
+      element.removeEventListener(
+        'touchmove',
+        onTouchMove,
+        supportsPassive
+          ? ({
+              passive: true,
+            } as EventListenerOptions)
+          : false,
+      );
       element.removeEventListener('touchend', onTouchEnd);
     }
   };
@@ -58,17 +67,41 @@ export default function useMobileTouchMove(
       touchY = Math.ceil(e.touches[0].pageY);
 
       element = e.target as HTMLElement;
-      element!.addEventListener('touchmove', onTouchMove);
+      element!.addEventListener(
+        'touchmove',
+        onTouchMove,
+        supportsPassive
+          ? ({
+              passive: true,
+            } as EventListenerOptions)
+          : false,
+      );
       element!.addEventListener('touchend', onTouchEnd);
     }
   };
 
   watch(inVirtual, val => {
-    listRef.value.removeEventListener('touchstart', onTouchStart);
+    listRef.value.removeEventListener(
+      'touchstart',
+      onTouchStart,
+      supportsPassive
+        ? ({
+            passive: true,
+          } as EventListenerOptions)
+        : false,
+    );
     cleanUpEvents();
     clearInterval(interval);
     if (val) {
-      listRef.value.addEventListener('touchstart', onTouchStart);
+      listRef.value.addEventListener(
+        'touchstart',
+        onTouchStart,
+        supportsPassive
+          ? ({
+              passive: true,
+            } as EventListenerOptions)
+          : false,
+      );
     }
   });
 }