diff --git a/src/core/config.js b/src/core/config.js index cae9d3dd..0d8c1adb 100644 --- a/src/core/config.js +++ b/src/core/config.js @@ -19,6 +19,7 @@ export type Config = { warnHandler: ?(msg: string, vm: Component, trace: string) => void; ignoredElements: Array; keyCodes: { [key: string]: number | Array }; + useEventDelegation: boolean; // platform isReservedTag: (x?: string) => boolean; @@ -83,6 +84,15 @@ export default ({ // $flow-disable-line keyCodes: Object.create(null), + /** + * Use event delegation - this works around a few async edge cases caused by + * microtask / DOM event racing conditions, and should in theory save some + * memory. + * + * Off by default for backwards compatibility. + */ + useEventDelegation: false, + /** * Check if a tag is reserved so that it cannot be registered as a * component. This is platform-dependent and may be overwritten. diff --git a/src/platforms/web/runtime/modules/events.js b/src/platforms/web/runtime/modules/events.js index c0b03063..cb5097f9 100644 --- a/src/platforms/web/runtime/modules/events.js +++ b/src/platforms/web/runtime/modules/events.js @@ -1,5 +1,6 @@ /* @flow */ +import config from 'core/config' import { isDef, isUndef } from 'shared/util' import { updateListeners } from 'core/vdom/helpers/index' import { isIE, isPhantomJS, supportsPassive } from 'core/util/index' @@ -50,7 +51,12 @@ function add ( capture: boolean, passive: boolean ) { - if (!capture && !passive && delegateRE.test(name)) { + if ( + !capture && + !passive && + config.useEventDelegation && + delegateRE.test(name) + ) { const count = eventCounts[name] let store = target.__events if (!count) { @@ -150,7 +156,7 @@ function remove ( _target?: HTMLElement ) { const el: any = _target || target - if (!capture && delegateRE.test(name)) { + if (!capture && config.useEventDelegation && delegateRE.test(name)) { el.__events[name] = null if (--eventCounts[name] === 0) { removeGlobalHandler(name) diff --git a/test/e2e/specs/async-edge-cases.html b/test/e2e/specs/async-edge-cases.html index 4c7411b2..e933b9dd 100644 --- a/test/e2e/specs/async-edge-cases.html +++ b/test/e2e/specs/async-edge-cases.html @@ -6,6 +6,10 @@ +
diff --git a/types/test/vue-test.ts b/types/test/vue-test.ts index 40ded2d2..1116d530 100644 --- a/types/test/vue-test.ts +++ b/types/test/vue-test.ts @@ -75,6 +75,7 @@ class Test extends Vue { config.keyCodes = { esc: 27 }; config.ignoredElements = ['foo', /^ion-/]; config.async = false + config.useEventDelegation = true } static testMethods() { diff --git a/types/vue.d.ts b/types/vue.d.ts index 2098a694..32778543 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -74,6 +74,7 @@ export interface VueConfiguration { warnHandler(msg: string, vm: Vue, trace: string): void; ignoredElements: (string | RegExp)[]; keyCodes: { [key: string]: number | number[] }; + useEventDelegation: boolean; async: boolean; }