diff --git a/packages/runtime-vapor/__tests__/dom/event.spec.ts b/packages/runtime-vapor/__tests__/dom/event.spec.ts new file mode 100644 index 000000000..4b5988201 --- /dev/null +++ b/packages/runtime-vapor/__tests__/dom/event.spec.ts @@ -0,0 +1,106 @@ +import { effectScope } from '@vue/reactivity' +import { + delegate, + delegateEvents, + on, + renderEffect, + setDynamicEvents, +} from '../../src' + +describe('dom event', () => { + delegateEvents('click') + + test('on', () => { + const el = document.createElement('div') + const handler = vi.fn() + on(el, 'click', handler) + el.click() + expect(handler).toHaveBeenCalled() + }) + + test('delegate with direct attachment', () => { + const el = document.createElement('div') + document.body.appendChild(el) + const handler = vi.fn() + ;(el as any).$evtclick = handler + el.click() + expect(handler).toHaveBeenCalled() + }) + + test('delegate', () => { + const el = document.createElement('div') + document.body.appendChild(el) + const handler = vi.fn() + delegate(el, 'click', handler) + el.click() + expect(handler).toHaveBeenCalled() + }) + + test('delegate with stopPropagation', () => { + const parent = document.createElement('div') + const child = document.createElement('div') + parent.appendChild(child) + document.body.appendChild(parent) + const parentHandler = vi.fn() + delegate(parent, 'click', parentHandler) + const childHandler = vi.fn(e => e.stopPropagation()) + delegate(child, 'click', childHandler) + child.click() + expect(parentHandler).not.toHaveBeenCalled() + expect(childHandler).toHaveBeenCalled() + }) + + test('delegate with stopImmediatePropagation', () => { + const parent = document.createElement('div') + const child = document.createElement('div') + parent.appendChild(child) + document.body.appendChild(parent) + const parentHandler = vi.fn() + delegate(parent, 'click', parentHandler) + const childHandler = vi.fn(e => e.stopImmediatePropagation()) + delegate(child, 'click', childHandler) + child.click() + expect(parentHandler).not.toHaveBeenCalled() + expect(childHandler).toHaveBeenCalled() + }) + + test('delegate with multiple handlers', () => { + const el = document.createElement('div') + document.body.appendChild(el) + const handler1 = vi.fn() + const handler2 = vi.fn() + delegate(el, 'click', handler1) + delegate(el, 'click', handler2) + el.click() + expect(handler1).toHaveBeenCalled() + expect(handler2).toHaveBeenCalled() + }) + + test('delegate with multiple handlers + stopImmediatePropagation', () => { + const el = document.createElement('div') + document.body.appendChild(el) + const handler1 = vi.fn(e => e.stopImmediatePropagation()) + const handler2 = vi.fn() + delegate(el, 'click', handler1) + delegate(el, 'click', handler2) + el.click() + expect(handler1).toHaveBeenCalled() + expect(handler2).not.toHaveBeenCalled() + }) + + test('setDynamicEvents', () => { + const el = document.createElement('div') + const handler = vi.fn() + const scope = effectScope() + scope.run(() => { + renderEffect(() => { + setDynamicEvents(el, { + click: handler, + }) + }) + }) + el.click() + expect(handler).toHaveBeenCalled() + scope.stop() + }) +}) diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts index c9c72a288..4987ecfc0 100644 --- a/packages/runtime-vapor/src/dom/event.ts +++ b/packages/runtime-vapor/src/dom/event.ts @@ -89,6 +89,7 @@ const delegatedEventHandler = (e: Event) => { } } else { handlers(e) + if (e.cancelBubble) return } } node = @@ -103,6 +104,6 @@ export function setDynamicEvents( events: Record any>, ): void { for (const name in events) { - on(el, name, () => events[name], { effect: true }) + on(el, name, events[name], { effect: true }) } }