我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
您只需在主体上安装一个双击处理程序，并在此元素上安装另一个。在该元素的处理程序中，只需返回false以防止事件传播。因此，当双击发生时，如果它在元素上，它将被捕获，并且不会传播到主体上的处理程序。否则它会被身体上的处理程序抓住。
更新：如果你真的不想阻止事件传播，你只需要使用closest来检查点击是发生在你的元素还是他的一个孩子身上：
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).on('click', function(event) {
if (!$(event.target).closest('#div3').length) {
alert("outside");
}
});
</script>
</head>
<body>
<div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
<div style="background-color:red;width:100px;height:100px;" id="div2"></div>
<div style="background-color:green;width:100px;height:100px;" id="div3"></div>
<div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
<div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>
更新：不带jQuery:
<html>
<head>
<script>
function findClosest (element, fn) {
if (!element) return undefined;
return fn(element) ? element : findClosest(element.parentElement, fn);
}
document.addEventListener("click", function(event) {
var target = findClosest(event.target, function(el) {
return el.id == 'div3'
});
if (!target) {
alert("outside");
}
}, false);
</script>
</head>
<body>
<div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
<div style="background-color:red;width:100px;height:100px;" id="div2"></div>
<div style="background-color:green;width:100px;height:100px;" id="div3">
<div style="background-color:pink;width:50px;height:50px;" id="div6"></div>
</div>
<div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
<div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>
其他回答
在我的DROPDOWN案例中，Ben Bud的解决方案工作得很好，但我有一个单独的切换按钮和一个onClick处理程序。因此，外部单击逻辑与单击切换按钮冲突。下面是我如何通过传递按钮的ref来解决这个问题：
import React, { useRef, useEffect, useState } from "react";
/**
* Hook that triggers onClose when clicked outside of ref and buttonRef elements
*/
function useOutsideClicker(ref, buttonRef, onOutsideClick) {
useEffect(() => {
function handleClickOutside(event) {
/* clicked on the element itself */
if (ref.current && !ref.current.contains(event.target)) {
return;
}
/* clicked on the toggle button */
if (buttonRef.current && !buttonRef.current.contains(event.target)) {
return;
}
/* If it's something else, trigger onClose */
onOutsideClick();
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
}
/**
* Component that alerts if you click outside of it
*/
export default function DropdownMenu(props) {
const wrapperRef = useRef(null);
const buttonRef = useRef(null);
const [dropdownVisible, setDropdownVisible] = useState(false);
useOutsideClicker(wrapperRef, buttonRef, closeDropdown);
const toggleDropdown = () => setDropdownVisible(visible => !visible);
const closeDropdown = () => setDropdownVisible(false);
return (
<div>
<button onClick={toggleDropdown} ref={buttonRef}>Dropdown Toggler</button>
{dropdownVisible && <div ref={wrapperRef}>{props.children}</div>}
</div>
);
}
MUI有一个小组件来解决这个问题：https://mui.com/base/react-click-away-listener/它的重量低于1kB，支持移动、IE 11和门户网站。
对于那些需要绝对定位的人，我选择的一个简单选项是添加一个包装器组件，该组件的样式是以透明背景覆盖整个页面。然后可以在这个元素上添加一个onClick来关闭内部组件。
<div style={{
position: 'fixed',
top: '0', right: '0', bottom: '0', left: '0',
zIndex: '1000',
}} onClick={() => handleOutsideClick()} >
<Content style={{position: 'absolute'}}/>
</div>
现在，如果您在内容上添加一个单击处理程序，那么事件也将传播到上面的div，从而触发handlerOutsideClick。如果这不是您想要的行为，只需停止处理程序上的事件进程。
<Content style={{position: 'absolute'}} onClick={e => {
e.stopPropagation();
desiredFunctionCall();
}}/>
`
我在discuss.reactjs.org上找到了一个解决方案，这要感谢Ben Alpert。单击我的树中的一个组件会导致一个重新阅读程序，在更新时删除了单击的元素。由于React的重读发生在调用文档正文处理程序之前，因此元素未被检测为“在”树中。
解决方案是在应用程序根元素上添加处理程序。
主要：
window.__myapp_container = document.getElementById('app')
React.render(<App/>, window.__myapp_container)
组件：
import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
export default class ClickListener extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
onClickOutside: PropTypes.func.isRequired
}
componentDidMount () {
window.__myapp_container.addEventListener('click', this.handleDocumentClick)
}
componentWillUnmount () {
window.__myapp_container.removeEventListener('click', this.handleDocumentClick)
}
/* using fat arrow to bind to instance */
handleDocumentClick = (evt) => {
const area = ReactDOM.findDOMNode(this.refs.area);
if (!area.contains(evt.target)) {
this.props.onClickOutside(evt)
}
}
render () {
return (
<div ref='area'>
{this.props.children}
</div>
)
}
}
你可以用一个简单的方法来解决你的问题，我向你展示：
....
const [dropDwonStatus , setDropDownStatus] = useState(false)
const openCloseDropDown = () =>{
setDropDownStatus(prev => !prev)
}
const closeDropDown = ()=> {
if(dropDwonStatus){
setDropDownStatus(false)
}
}
.
.
.
<parent onClick={closeDropDown}>
<child onClick={openCloseDropDown} />
</parent>
这对我有用，祝你好运；）
