alibaba / alibaba/hooks

useEventListener target为null,默认全局绑定事件

Open
#2,572 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15k
Forks
2.8k
Avg merge
15h 7m
Merged PRs (30d)
2

Description

portal A,内包子页面B, 有元素类名为 'testclass',
应用A,'test-id'绑定click事件,
useEventListener(
'click',
(e) => {
if (e.target.className === 'testclass') {
do...
}
},
{ target: document.getElementById('test-id') },
);
这时候页面B展示的时候逻辑正常。

当,portal A 内如果展示的是子页面C,document.getElementById('test-id') 为null, 这时候会默认全局绑定了click事件。页面C里元素如果有相同类名'testclass',就会触发本不应该触发的逻辑。

期望如果target为null的时候,不要默认在body上绑定事件

Contributor guide

Open the contributing guide

Research direction

Start by locating the useEventListener implementation and its related tests, then reproduce the case where the supplied target is null. Done means a null target does not attach the click handler globally or cause matching elements elsewhere to trigger it.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.