javascript - Closehide an element when clicking outside of it (but not inside) - Stack Overflow

admin管理员组

文章数量:1356745

I have a <div> that exists on a page and I need to make it so that when the user clicks outside of that element it will bee hidden, but if the user clicks somewhere within the element, then it should stay.

I tried using
e.stopPropagation();
and
e.preventDefault();

adding it to the click event of that certain DIV but that didn't work.

Thanks!

I have a <div> that exists on a page and I need to make it so that when the user clicks outside of that element it will bee hidden, but if the user clicks somewhere within the element, then it should stay.

I tried using
e.stopPropagation();
and
e.preventDefault();

adding it to the click event of that certain DIV but that didn't work.

Thanks!

• javascript
• click

Share Improve this question Follow edited Jun 26, 2022 at 21:37 Roko C. Buljan 207k4141 gold badges328328 silver badges340340 bronze badges asked May 26, 2011 at 14:31 OviOvi 2,55999 gold badges5252 silver badges7272 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

• Assign the desired event listener (like "click") to document or window using EventTarget.addEventListener()
• Use Event.target in bination with Element.closest() as negation ! - in order to check whether the Event.target (the element that initiated the Event) - its self or closest ancestor have a specific selector.
• To control an element visibility create a CSS class that does the necessary styling, and use Element.classlist to add, remove or toggle that class (as needed).

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>

• Never use Event.stopPropagation() unless you really, really know what you're doing. Your app or third-party code should be always notified about all events happening in their context.

Usage example: Close popup modal on click outside

Probably the easiest way to do this will be to monitor clicks on the entire document, and ignore it if it's not that element. If it is, then hide it.

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

Edit: Derp, misunderstood, click inside should stay, otherwise hide... invert the equality check.

http://jsfiddle/robert/QcPx4/

useOuterClick

Hi . you can create custom hook like this:

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);
            }
        }
    }
}, [])};



 

then use it this way in your ponent:

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>
    </>
);
};

本文标签： javascriptClosehide an element when clicking outside of it (but not inside)Stack Overflow