diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts index 76d68086c8..2f3072713d 100644 --- a/src/runtime/internal/dev.ts +++ b/src/runtime/internal/dev.ts @@ -2,7 +2,7 @@ import { custom_event, append, append_hydration, insert, insert_hydration, detac import { SvelteComponent } from './Component'; export function dispatch_dev(type: string, detail?: T) { - document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, true)); + document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, { bubbles: true })); } export function append_dev(target: Node, node: Node) { diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index eb3389e3f8..8367ab619d 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -630,9 +630,14 @@ export function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } -export function custom_event(type: string, detail?: T, bubbles: boolean = false) { +export interface CustomEventOpts { + bubbles?: boolean; + cancelable?: boolean; +} + +export function custom_event(type: string, detail?: T, opts?: CustomEventOpts) { const e: CustomEvent = document.createEvent('CustomEvent'); - e.initCustomEvent(type, bubbles, false, detail); + e.initCustomEvent(type, opts.bubbles, opts.cancelable, detail); return e; } diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts index bb3df3d295..610557ed18 100644 --- a/src/runtime/internal/lifecycle.ts +++ b/src/runtime/internal/lifecycle.ts @@ -1,4 +1,4 @@ -import { custom_event } from './dom'; +import { custom_event, CustomEventOpts } from './dom'; export let current_component; @@ -32,13 +32,13 @@ export function createEventDispatcher< >(): >(type: EventKey, detail?: EventMap[EventKey]) => void { const component = get_current_component(); - return (type: string, detail?: any) => { + return (type: string, detail?: any, opts?: CustomEventOpts) => { const callbacks = component.$$.callbacks[type]; if (callbacks) { // TODO are there situations where events could be dispatched // in a server (non-DOM) environment? - const event = custom_event(type, detail); + const event = custom_event(type, detail, opts); callbacks.slice().forEach(fn => { fn.call(component, event); });