diff --git a/src/compile/nodes/Window.ts b/src/compile/nodes/Window.ts index 6651fce854..4d1dac2587 100644 --- a/src/compile/nodes/Window.ts +++ b/src/compile/nodes/Window.ts @@ -33,6 +33,11 @@ const readonly = new Set([ 'online', ]); +const specialEventTargets = new Map([ + ['mouseenter', 'document'], + ['mouseleave', 'document'], +]); + export default class Window extends Node { type: 'Window'; handlers: EventHandler[]; @@ -93,15 +98,17 @@ export default class Window extends Node { ${handlerName}.destroy(); `); } else { + const target = specialEventTargets.get(handler.name) || 'window'; + block.builders.init.addBlock(deindent` function ${handlerName}(event) { ${handlerBody} } - window.addEventListener("${handler.name}", ${handlerName}); + ${target}.addEventListener("${handler.name}", ${handlerName}); `); block.builders.destroy.addBlock(deindent` - window.removeEventListener("${handler.name}", ${handlerName}); + ${target}.removeEventListener("${handler.name}", ${handlerName}); `); } }); diff --git a/test/runtime/samples/window-event-special-target/_config.js b/test/runtime/samples/window-event-special-target/_config.js new file mode 100644 index 0000000000..c34d3c0eed --- /dev/null +++ b/test/runtime/samples/window-event-special-target/_config.js @@ -0,0 +1,11 @@ +export default { + test(assert, component, target, window) { + assert.equal(component.get().events.toString(), ''); + const event1 = new window.Event('mouseenter'); + window.document.dispatchEvent(event1); + assert.equal(component.get().events.toString(), 'enter'); + const event2 = new window.Event('mouseleave'); + window.document.dispatchEvent(event2); + assert.equal(component.get().events.toString(), 'enter,leave'); + }, +}; diff --git a/test/runtime/samples/window-event-special-target/main.html b/test/runtime/samples/window-event-special-target/main.html new file mode 100644 index 0000000000..37399cc607 --- /dev/null +++ b/test/runtime/samples/window-event-special-target/main.html @@ -0,0 +1,12 @@ + + +