我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
我喜欢@Ben Bud的答案，但当有视觉上嵌套的元素时，contains（event.target）并不能像预期的那样工作。
因此，有时最好计算点击点是否位于元素内部。
这是我的React Hook代码。
import { useEffect } from 'react'
export function useOnClickRectOutside(ref, handler) {
useEffect(() => {
const listener = (event) => {
const targetEl = ref.current
if (targetEl) {
const clickedX = event.clientX
const clickedY = event.clientY
const rect = targetEl.getBoundingClientRect()
const targetElTop = rect.top
const targetElBottom = rect.top + rect.height
const targetElLeft = rect.left
const targetElRight = rect.left + rect.width
if (
// check X Coordinate
targetElLeft < clickedX &&
clickedX < targetElRight &&
// check Y Coordinate
targetElTop < clickedY &&
clickedY < targetElBottom
) {
return
}
// trigger event when the clickedX,Y is outside of the targetEl
handler(event)
}
}
document.addEventListener('mousedown', listener)
document.addEventListener('touchstart', listener)
return () => {
document.removeEventListener('mousedown', listener)
document.removeEventListener('touchstart', listener)
}
}, [ref, handler])
}
其他回答
我之所以这样做，部分原因是遵循了这一点，并遵循了React官方文件关于处理需要React ^16.3的参考文献。这是我在尝试了其他一些建议之后唯一有效的方法。。。
class App extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentWillMount() {
document.addEventListener("mousedown", this.handleClick, false);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClick, false);
}
handleClick = e => {
/*Validating click is made inside a component*/
if ( this.inputRef.current === e.target ) {
return;
}
this.handleclickOutside();
};
handleClickOutside(){
/*code to handle what to do when clicked outside*/
}
render(){
return(
<div>
<span ref={this.inputRef} />
</div>
)
}
}
只需使用mui（material ui）中的ClickAwayListener：
<ClickAwayListener onClickAway={handleClickAway}>
{children}
<ClickAwayListener >
有关更多信息，请查看：https://mui.com/base/react-click-away-listener/
import ReactDOM from 'react-dom' ;
class SomeComponent {
constructor(props) {
// First, add this to your constructor
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentWillMount() {
document.addEventListener('mousedown', this.handleClickOutside, false);
}
// Unbind event on unmount to prevent leaks
componentWillUnmount() {
window.removeEventListener('mousedown', this.handleClickOutside, false);
}
handleClickOutside(event) {
if(!ReactDOM.findDOMNode(this).contains(event.path[0])){
console.log("OUTSIDE");
}
}
}
MUI有一个小组件来解决这个问题：https://mui.com/base/react-click-away-listener/它的重量低于1kB，支持移动、IE 11和门户网站。
Ez的方式。。。（2022年更新）
创建挂钩：useOutsideClick.ts
export function useOutsideClick(ref: any, onClickOut: () => void){
useEffect(() => {
const onClick = ({target}: any) => !ref.contains(target) && onClickOut?.()
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, []);
}
将componentRef添加到组件并调用useOutsideClick
export function Example(){
const componentRef = useRef();
useOutsideClick(componentRef.current!, () => {
// do something here
});
return (
<div ref={componentRef as any}> My Component </div>
)
}
