antd-mobile
Version:
<div align="center">
31 lines (30 loc) • 1.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
// 监听点击组件外部的事件
function useClickOutside(handler, ref, hasKeyboardProps = false) {
(0, _react.useEffect)(() => {
function handleClick(event) {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
}
// 向前兼容逻辑：
// 1. 对于有键盘属性的 VirtualInput，在捕获阶段监听：
// 这是为了确保在事件被阻止传播之前触发。比如输入框中的单个数字 click 事件会 stopPropagation, 但这里依然能捕获到
// 2. 对于无键盘属性的 VirtualInput 组件，在冒泡阶段监听：
// 这种情况通常是 VirtualInput + NumberKeyboard 为兄弟关系，在以前版本中点击 NumberKeyboard **不会**触发 VirtualInput 的 blur 事件
// 原先原理：通过 NumberKeyboard 内部 onMouseDown 时 preventDefault 阻止的 VirtualInput 内原生的 blur 事件
// 新的原理：NumberKeyboard 的 Popup 默认会 stopPropagation click, 这里在冒泡阶段监听不到，不会调用 VirtualInput 的 onBlur 回调（非原生事件）。
document.addEventListener('click', handleClick, hasKeyboardProps ? true : false);
return () => {
document.removeEventListener('click', handleClick, hasKeyboardProps ? true : false);
};
}, [handler, ref]);
}
var _default = useClickOutside;
exports.default = _default;