CODEWITHSUNDEEP
javascriptclick
Ovi
Ovi

Reputation: 2559

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

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 become 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!

Upvotes: 4

Views: 8990

Answers (3)

Mehdi Salimi
Mehdi Salimi

Reputation: 21

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 component:

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

  • Assign the desired event listener (like "click") to document or window using EventTarget.addEventListener()
  • Use Event.target in combination 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

Upvotes: 4

Robert
Robert

Reputation: 21388

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.net/robert/QcPx4/

Upvotes: 2

Related Questions