在元素外部(但不在内部）单击时关闭/隐藏该元素

Close/hide an element when clicking outside of it (but not inside)

本文关键字：元素 隐藏 单击 外部 在内部      更新时间：2023-09-26

我有一个<div>，它存在于页面上，我需要制作它，以便当用户在该元素外部单击时，它会被隐藏，但如果用户在元素内部单击某个位置，它应该会保留下来。

我尝试使用
e.stopPropagation();
和
e.preventDefault();

将其添加到某个DIV的点击事件中，但这没有起作用。

谢谢！

  • 使用EventTarget.addEventListener（）将所需的事件侦听器（如"click"）分配给document或window
  • 将Event.target与Element.closest（）组合用作否定!-，以检查Event.targets（启动事件的元素）-其自身或最近的祖先是否具有特定的选择器
  • 要控制元素可见性，请创建一个进行必要样式设置的CSS类，并使用element.classlist添加、删除或切换该类（根据需要）

const elPopup = document.querySelector("#popup");
addEventListener("click", (evt) => {
  if (!evt.target.closest("#popup")) elPopup.classList.remove("isOpen");
});
#popup {
  padding: 2rem;
  background: gold;
  display: none; /* Hidden popup by default */
}
#popup.isOpen {
  display: block;
}
<div id="popup" class="isOpen">
  Click outside to close me.<br>
  Click inside will do nothing.
</div>

  • 永远不要使用Event.stopPropagation（），除非你真的非常清楚自己在做什么。您的应用程序或第三方代码应始终通知其上下文中发生的所有事件

用法示例：点击外部关闭弹出模式

可能最简单的方法是监视整个文档上的点击，如果不是那个元素，则忽略它。如果是，就把它藏起来。

(function(div) {
    $(document).click(function(e) {
        if (e.srcElement !== div) $(div).hide();
    });
})($('div')[0]);

编辑：Derp，误解，点击里面应该留下，否则隐藏。。。反转相等检查。

http://jsfiddle.net/robert/QcPx4/

useOuterClick

嗨。您可以创建这样的自定义挂钩：

export const useOuterClick = (elementRef, setElementVisibility) => {
useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
    function handleClick(e: any) {
        if (elementRef && elementRef.current) {
            const ref: any = elementRef.current;
            if (!ref.contains(e.target)) {
                setElementVisibility(false);
            }
        }
    }
}, [])};

然后在组件中以这种方式使用它：

import { useState, useRef } from 'react';
import useOuterClick from './hooks/useOuterClick';
 export const SampleComponent = () => {
const [activeElement, setActiveElement] = useState(false);
const elementRef = useRef();
useOuterClick(elementRef, setActiveElement);
return (
    <>
        <div ref={elementRef}>
            <button 
              onClick={() => setActiveElement(!activeElement)}>
               'this button can open and close div'
            </button>
            {activeElement &&
              <div>'this div will be hidden if you click on out side except 
                    button'
              </div>
             }
        </div>
    </>
);
};
相关文章：