mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-06-11 23:49:14 +08:00
[Improvement] optimize passive events (#478)
This commit is contained in:
parent
2d2a368e2c
commit
30f22b28ed
@ -1,6 +1,7 @@
|
||||
import manager from './manager';
|
||||
import context from './context';
|
||||
import scrollUtils from '../../utils/scroll';
|
||||
import { on, off } from '../../utils/event';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -70,7 +71,11 @@ export default {
|
||||
status = '10';
|
||||
}
|
||||
|
||||
if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
|
||||
if (
|
||||
status !== '11' &&
|
||||
isVertical &&
|
||||
!(parseInt(status, 2) & parseInt(direction, 2))
|
||||
) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
@ -106,8 +111,8 @@ export default {
|
||||
this.opened = true;
|
||||
|
||||
if (this.preventScroll) {
|
||||
document.addEventListener('touchstart', this.recordPosition);
|
||||
document.addEventListener('touchmove', this.watchTouchMove);
|
||||
on(document, 'touchstart', this.recordPosition);
|
||||
on(document, 'touchmove', this.watchTouchMove);
|
||||
}
|
||||
},
|
||||
|
||||
@ -129,8 +134,8 @@ export default {
|
||||
}
|
||||
|
||||
if (this.preventScroll) {
|
||||
document.removeEventListener('touchstart', this.recordPosition);
|
||||
document.removeEventListener('touchmove', this.watchTouchMove);
|
||||
off(document, 'touchstart', this.recordPosition);
|
||||
off(document, 'touchmove', this.watchTouchMove);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -30,6 +30,7 @@
|
||||
<script>
|
||||
import { create } from '../utils';
|
||||
import { raf } from '../utils/raf';
|
||||
import { on, off } from '../utils/event';
|
||||
import scrollUtils from '../utils/scroll';
|
||||
|
||||
export default create({
|
||||
@ -119,7 +120,7 @@ export default create({
|
||||
// whether to bind sticky listener
|
||||
scrollHandler(init) {
|
||||
this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
|
||||
this.scrollEl[init ? 'addEventListener' : 'removeEventListener']('scroll', this.onScroll);
|
||||
(init ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
|
||||
if (init) {
|
||||
this.onScroll();
|
||||
}
|
||||
|
@ -6,7 +6,7 @@
|
||||
* ```
|
||||
*/
|
||||
|
||||
import { isServer } from './index';
|
||||
import { on, off } from './event';
|
||||
|
||||
const context = '@@clickoutsideContext';
|
||||
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
arg: binding.arg || 'click'
|
||||
};
|
||||
|
||||
!isServer && document.addEventListener(el[context].arg, handler);
|
||||
on(document, el[context].arg, handler);
|
||||
},
|
||||
|
||||
update(el, binding) {
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
!isServer && document.removeEventListener(el[context].arg, el[context].handler);
|
||||
off(document, el[context].arg, el[context].handler);
|
||||
},
|
||||
|
||||
install(Vue) {
|
||||
|
28
packages/utils/event.js
Normal file
28
packages/utils/event.js
Normal file
@ -0,0 +1,28 @@
|
||||
import { isServer } from './';
|
||||
|
||||
export let supportsPassive = false;
|
||||
if (!isServer) {
|
||||
try {
|
||||
const opts = {};
|
||||
Object.defineProperty(opts, 'passive', {
|
||||
get() {
|
||||
/* istanbul ignore next */
|
||||
supportsPassive = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('test-passive', null, opts);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
export function on(target, event, handler, passive = false) {
|
||||
!isServer &&
|
||||
target.addEventListener(
|
||||
event,
|
||||
handler,
|
||||
supportsPassive ? { capture: false, passive } : false
|
||||
);
|
||||
}
|
||||
|
||||
export function off(target, event, handler) {
|
||||
!isServer && target.removeEventListener(event, handler);
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import Utils from '../utils/scroll';
|
||||
import { on, off } from '../utils/event';
|
||||
|
||||
const CONTEXT = '@@Waterfall';
|
||||
const OFFSET = 300;
|
||||
@ -14,8 +15,8 @@ function doBindEvent() {
|
||||
this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
|
||||
this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
|
||||
|
||||
var disabledExpr = this.el.getAttribute('waterfall-disabled');
|
||||
var disabled = false;
|
||||
const disabledExpr = this.el.getAttribute('waterfall-disabled');
|
||||
let disabled = false;
|
||||
if (disabledExpr) {
|
||||
this.vm.$watch(disabledExpr, (value) => {
|
||||
this.disabled = value;
|
||||
@ -25,10 +26,10 @@ function doBindEvent() {
|
||||
}
|
||||
this.disabled = disabled;
|
||||
|
||||
var offset = this.el.getAttribute('waterfall-offset');
|
||||
const offset = this.el.getAttribute('waterfall-offset');
|
||||
this.offset = Number(offset) || OFFSET;
|
||||
|
||||
this.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
|
||||
on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
|
||||
|
||||
this.scrollEventListener();
|
||||
}
|
||||
@ -119,7 +120,9 @@ export default function(type) {
|
||||
|
||||
unbind(el) {
|
||||
const context = el[CONTEXT];
|
||||
context.scrollEventTarget && context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
|
||||
if (context.scrollEventTarget) {
|
||||
off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user