我的钩子检测onClick，防止onChange

Question

我创建了一个钩子来检测组件的内部和外部点击

const useDetectClick = (
ref: RefObject<HTMLDivElement>,
insideClick: () => void,
outsideClick: () => void
) => {
useEffect(() => {
const handleClick = (event: MouseEvent) => {
const { target } = event;
if (ref.current && !ref.current.contains(target as Node)) {
outsideClick();
} else if (ref.current && ref.current.contains(target as Node)) {
insideClick();
}
};
document.addEventListener('click', handleClick, true);
return () => {
document.removeEventListener('click', handleClick, true);
};
}, [ref]);
};

在组件内部，如果我有一组带标签的复选框。我想回调我有在insideClick运行，但也onChange时，单击一个复选框。单击标签可以工作，我认为这是因为标签具有默认的单击功能，这意味着它将焦点放在具有引用ID的元素上。但是，单击实际的复选框，该事件将被阻止。

我怎样才能通过这个?

这是一个与示例

相关的代码

Answer 1

如果你不使用事件捕获，你的代码也可以工作。

document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};