Skip to content

Commit 8d1669b

Browse files
tangjinzhoutangjinzhou
committed
fix: passive waring
1 parent 5b8bda9 commit 8d1669b

File tree

8 files changed

+121
-31
lines changed

8 files changed

+121
-31
lines changed

‎components/_util/supportsPassive.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Test via a getter in the options object to see if the passive property is accessed
2+
let supportsPassive = false;
3+
try {
4+
let opts = Object.defineProperty({}, 'passive', {
5+
get() {
6+
supportsPassive = true;
7+
},
8+
});
9+
window.addEventListener('testPassive', null, opts);
10+
window.removeEventListener('testPassive', null, opts);
11+
} catch (e) {}
12+
13+
export default supportsPassive;

‎components/affix/utils.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import addEventListener from '../vc-util/Dom/addEventListener';
22
import { ComponentPublicInstance } from 'vue';
3+
import supportsPassive from '../_util/supportsPassive';
34

45
export type BindElement = HTMLElement | Window | null | undefined;
56
export type Rect = ClientRect | DOMRect;
@@ -78,9 +79,14 @@ export function addObserveTarget(
7879
// Add listener
7980
TRIGGER_EVENTS.forEach(eventName => {
8081
entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
81-
entity!.affixList.forEach(targetAffix => {
82-
(targetAffix as any).lazyUpdatePosition();
83-
});
82+
entity!.affixList.forEach(
83+
targetAffix => {
84+
(targetAffix as any).lazyUpdatePosition();
85+
},
86+
(eventName === 'touchstart' || eventName === 'touchmove') && supportsPassive
87+
? ({ passive: true } as EventListenerOptions)
88+
: false,
89+
);
8490
});
8591
});
8692
}

‎components/vc-drawer/src/Drawer.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
transformArguments,
1515
isNumeric,
1616
} from './utils';
17+
import supportsPassive from '../../_util/supportsPassive';
1718

1819
function noop() {}
1920

@@ -100,18 +101,7 @@ const Drawer = defineComponent({
100101
mounted() {
101102
nextTick(() => {
102103
if (!windowIsUndefined) {
103-
let passiveSupported = false;
104-
window.addEventListener(
105-
'test',
106-
null,
107-
Object.defineProperty({}, 'passive', {
108-
get: () => {
109-
passiveSupported = true;
110-
return null;
111-
},
112-
}),
113-
);
114-
this.passive = passiveSupported ? { passive: false } : false;
104+
this.passive = supportsPassive ? { passive: false } : false;
115105
}
116106
const open = this.getOpen();
117107
if (this.handler || open || this.sFirstEnter) {

‎components/vc-trigger/Trigger.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import BaseMixin from '../_util/BaseMixin';
1818
import Portal from '../_util/Portal';
1919
import classNames from '../_util/classNames';
2020
import { cloneElement } from '../_util/vnode';
21+
import supportsPassive from '../_util/supportsPassive';
2122

2223
function returnEmptyString() {
2324
return '';
@@ -165,6 +166,7 @@ export default defineComponent({
165166
currentDocument,
166167
'touchstart',
167168
this.onDocumentClick,
169+
supportsPassive ? { passive: true } : false,
168170
);
169171
}
170172
// close popup when trigger type contains 'onContextmenu' and document is scrolling.
@@ -378,7 +380,7 @@ export default defineComponent({
378380
mouseProps.onMouseleave = self.onPopupMouseleave;
379381
}
380382
mouseProps.onMousedown = this.onPopupMouseDown;
381-
mouseProps.onTouchstart = this.onPopupMouseDown;
383+
mouseProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onPopupMouseDown;
382384
const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = self;
383385
const {
384386
prefixCls,
@@ -603,11 +605,13 @@ export default defineComponent({
603605
if (this.isClickToHide() || this.isClickToShow()) {
604606
newChildProps.onClick = this.onClick;
605607
newChildProps.onMousedown = this.onMousedown;
606-
newChildProps.onTouchstart = this.onTouchstart;
608+
newChildProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onTouchstart;
607609
} else {
608610
newChildProps.onClick = this.createTwoChains('onClick');
609611
newChildProps.onMousedown = this.createTwoChains('onMousedown');
610-
newChildProps.onTouchstart = this.createTwoChains('onTouchstart');
612+
newChildProps[
613+
supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'
614+
] = this.createTwoChains('onTouchstart');
611615
}
612616
if (this.isMouseEnterToShow()) {
613617
newChildProps.onMouseenter = this.onMouseenter;

‎components/vc-util/Dom/addEventListener.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1+
import supportsPassive from '../../_util/supportsPassive';
2+
13
export default function addEventListenerWrap(target, eventType, cb, option) {
24
if (target.addEventListener) {
3-
target.addEventListener(eventType, cb, option);
5+
let opt = option;
6+
if (
7+
opt === undefined &&
8+
supportsPassive &&
9+
(eventType === 'touchstart' || eventType === 'touchmove' || eventType === 'wheel')
10+
) {
11+
opt = { passive: true };
12+
}
13+
target.addEventListener(eventType, cb, opt);
414
}
515
return {
616
remove: () => {

‎components/vc-virtual-list/List.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import useOriginScroll from './hooks/useOriginScroll';
2222
import PropTypes from '../_util/vue-types';
2323
import classNames from '../_util/classNames';
2424
import { RenderFunc, SharedConfig } from './interface';
25+
import supportsPassive from '../_util/supportsPassive';
2526

2627
const EMPTY_DATA = [];
2728

@@ -264,7 +265,11 @@ const List = defineComponent({
264265
}
265266
const removeEventListener = () => {
266267
if (componentRef.value) {
267-
componentRef.value.removeEventListener('wheel', onRawWheel);
268+
componentRef.value.removeEventListener(
269+
'wheel',
270+
onRawWheel,
271+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
272+
);
268273
componentRef.value.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
269274
componentRef.value.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
270275
}
@@ -273,7 +278,11 @@ const List = defineComponent({
273278
nextTick(() => {
274279
if (componentRef.value) {
275280
removeEventListener();
276-
componentRef.value.addEventListener('wheel', onRawWheel);
281+
componentRef.value.addEventListener(
282+
'wheel',
283+
onRawWheel,
284+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
285+
);
277286
componentRef.value.addEventListener('DOMMouseScroll', onFireFoxScroll as any);
278287
componentRef.value.addEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
279288
}

‎components/vc-virtual-list/ScrollBar.tsx

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { defineComponent, PropType, reactive } from 'vue';
22
import classNames from '../_util/classNames';
33
import createRef from '../_util/createRef';
44
import raf from '../_util/raf';
5+
import supportsPassive from '../_util/supportsPassive';
56
import PropTypes from '../_util/vue-types';
67

78
const MIN_SIZE = 20;
@@ -60,8 +61,16 @@ export default defineComponent({
6061
},
6162

6263
mounted() {
63-
this.scrollbarRef.current.addEventListener('touchstart', this.onScrollbarTouchStart);
64-
this.thumbRef.current.addEventListener('touchstart', this.onMouseDown);
64+
this.scrollbarRef.current.addEventListener(
65+
'touchstart',
66+
this.onScrollbarTouchStart,
67+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
68+
);
69+
this.thumbRef.current.addEventListener(
70+
'touchstart',
71+
this.onMouseDown,
72+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
73+
);
6574
},
6675

6776
beforeUnmount() {
@@ -92,17 +101,33 @@ export default defineComponent({
92101
window.addEventListener('mousemove', this.onMouseMove);
93102
window.addEventListener('mouseup', this.onMouseUp);
94103

95-
this.thumbRef.current.addEventListener('touchmove', this.onMouseMove);
104+
this.thumbRef.current.addEventListener(
105+
'touchmove',
106+
this.onMouseMove,
107+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
108+
);
96109
this.thumbRef.current.addEventListener('touchend', this.onMouseUp);
97110
},
98111

99112
removeEvents() {
100113
window.removeEventListener('mousemove', this.onMouseMove);
101114
window.removeEventListener('mouseup', this.onMouseUp);
102115

103-
this.scrollbarRef.current.removeEventListener('touchstart', this.onScrollbarTouchStart);
104-
this.thumbRef.current.removeEventListener('touchstart', this.onMouseDown);
105-
this.thumbRef.current.removeEventListener('touchmove', this.onMouseMove);
116+
this.scrollbarRef.current.removeEventListener(
117+
'touchstart',
118+
this.onScrollbarTouchStart,
119+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
120+
);
121+
this.thumbRef.current.removeEventListener(
122+
'touchstart',
123+
this.onMouseDown,
124+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
125+
);
126+
this.thumbRef.current.removeEventListener(
127+
'touchmove',
128+
this.onMouseMove,
129+
supportsPassive ? ({ passive: true } as EventListenerOptions) : false,
130+
);
106131
this.thumbRef.current.removeEventListener('touchend', this.onMouseUp);
107132

108133
raf.cancel(this.moveRaf);

‎components/vc-virtual-list/hooks/useMobileTouchMove.ts

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import supportsPassive from '../../_util/supportsPassive';
12
import { watch, Ref } from 'vue';
23

34
const SMOOTH_PTG = 14 / 15;
@@ -17,7 +18,15 @@ export default function useMobileTouchMove(
1718

1819
const cleanUpEvents = () => {
1920
if (element) {
20-
element.removeEventListener('touchmove', onTouchMove);
21+
element.removeEventListener(
22+
'touchmove',
23+
onTouchMove,
24+
supportsPassive
25+
? ({
26+
passive: true,
27+
} as EventListenerOptions)
28+
: false,
29+
);
2130
element.removeEventListener('touchend', onTouchEnd);
2231
}
2332
};
@@ -58,17 +67,41 @@ export default function useMobileTouchMove(
5867
touchY = Math.ceil(e.touches[0].pageY);
5968

6069
element = e.target as HTMLElement;
61-
element!.addEventListener('touchmove', onTouchMove);
70+
element!.addEventListener(
71+
'touchmove',
72+
onTouchMove,
73+
supportsPassive
74+
? ({
75+
passive: true,
76+
} as EventListenerOptions)
77+
: false,
78+
);
6279
element!.addEventListener('touchend', onTouchEnd);
6380
}
6481
};
6582

6683
watch(inVirtual, val => {
67-
listRef.value.removeEventListener('touchstart', onTouchStart);
84+
listRef.value.removeEventListener(
85+
'touchstart',
86+
onTouchStart,
87+
supportsPassive
88+
? ({
89+
passive: true,
90+
} as EventListenerOptions)
91+
: false,
92+
);
6893
cleanUpEvents();
6994
clearInterval(interval);
7095
if (val) {
71-
listRef.value.addEventListener('touchstart', onTouchStart);
96+
listRef.value.addEventListener(
97+
'touchstart',
98+
onTouchStart,
99+
supportsPassive
100+
? ({
101+
passive: true,
102+
} as EventListenerOptions)
103+
: false,
104+
);
72105
}
73106
});
74107
}

0 commit comments

Comments
 (0)