diff --git a/packages/inula/src/event/EventBinding.ts b/packages/inula/src/event/EventBinding.ts index 01b3ea54..f3e9f58e 100644 --- a/packages/inula/src/event/EventBinding.ts +++ b/packages/inula/src/event/EventBinding.ts @@ -16,7 +16,7 @@ /** * 事件绑定实现,分为绑定委托事件和非委托事件 */ -import { allDelegatedInulaEvents, simulatedDelegatedEvents } from './EventHub'; +import { allDelegatedInulaEvents, portalDefaultDelegatedEvents, simulatedDelegatedEvents } from './EventHub'; import { isDocument } from '../dom/utils/Common'; import { getNearestVNode, getNonDelegatedListenerMap } from '../dom/DOMInternalKeys'; import { asyncUpdates, runDiscreteUpdates } from '../renderer/TreeBuilder'; @@ -89,6 +89,13 @@ export function listenSimulatedDelegatedEvents(root: VNode) { } } +// portal绑定默认事件 +export function listenPortalEvents(root: VNode) { + for (let i = 0; i < portalDefaultDelegatedEvents.length; i++) { + lazyDelegateOnRoot(root, portalDefaultDelegatedEvents[i]); + } +} + // 通过inula事件名获取到native事件名 function getNativeEvtName(inulaEventName, capture) { let nativeName; diff --git a/packages/inula/src/event/EventHub.ts b/packages/inula/src/event/EventHub.ts index 2f8e8a1f..0dc01c50 100644 --- a/packages/inula/src/event/EventHub.ts +++ b/packages/inula/src/event/EventHub.ts @@ -16,6 +16,13 @@ // 需要委托的inula事件和原生事件对应关系 export const allDelegatedInulaEvents = new Map(); +/** + * Portal根节点默认绑定事件,解决常见事件无法冒泡到parent vnode的问题 + * 例如:parent vNode节点绑定了mousedown事件,子节点为portal节点,子节点下元素未绑定mousedown事件 + * 此时,点击portal下子元素,mousedown事件无法冒泡到parentNode + */ +export const portalDefaultDelegatedEvents = ['onMouseDown', 'onMouseUp', 'onKeyDown', 'onKeyUp', 'onFocus', 'onBlur', 'onClick']; + // 模拟委托事件,不冒泡事件需要利用其他事件来触发冒泡过程 export const simulatedDelegatedEvents = ['onMouseEnter', 'onMouseLeave']; // 所有委托的原生事件集合 diff --git a/packages/inula/src/renderer/render/DomPortal.ts b/packages/inula/src/renderer/render/DomPortal.ts index 27bad601..24628605 100644 --- a/packages/inula/src/renderer/render/DomPortal.ts +++ b/packages/inula/src/renderer/render/DomPortal.ts @@ -17,11 +17,12 @@ import type { VNode } from '../Types'; import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver'; import { createChildrenByDiff } from '../diff/nodeDiffComparator'; import { popCurrentRoot, pushCurrentRoot } from '../RootStack'; -import { listenSimulatedDelegatedEvents } from '../../event/EventBinding'; +import { listenPortalEvents, listenSimulatedDelegatedEvents } from '../../event/EventBinding'; export function bubbleRender(processing: VNode) { resetNamespaceCtx(processing); listenSimulatedDelegatedEvents(processing); + listenPortalEvents(processing); popCurrentRoot(); }