Whenever I Click Outside the Element It Should Close

How do I detect a click outside an element?

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

whenever i click outside the element it should close

You must try mouseup event to get the target div and hide/show on your requirements. Read more about .mouseup() Event Handler

Check the below code to show .notifications div on clicking the parent div .notification and if clicking outside the div, then .notifications div should be hidden.

$('.notification').on('click', function(event){    $(this).find('.counter').hide();    $('.notifications').removeClass('hidden');});
$(document).mouseup(function (e) {    var container = $('.notifications');        if (!container.is(e.target) && container.has(e.target).length === 0) {        $('.notifications').addClass('hidden');    }});

.notification {    background: #5fba7d;    color: white;    padding: 15px 20px;}
.notifications {      background: white;    border: 1px solid green;    color: white;    padding: 5px 20px;}
.counter {    padding: 5px;    border-radius: 20px;    background: #ffffff;    position: absolute;    left: 110px;    font-size: 12px;    color: #5fba7d;    top: 10px;}
.hidden {    display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification hide-on-med-and-down">    <span><img src="/static/img/icon-popup.svg" alt="Notification" title="Notification"></span>
    <div class="counter">100</div>
    <ul class="notifications hidden">        <li class="">          <div class="icon"><img src="/static/img/icon-popup.svg"></div>          <a href="javascript:void(0);">            <div class="date" data-date="2018-07-12">2018-07-12</div>          </a>          <div class="clearfix"></div>        </li>      <a href="javascript:void(0);"><div class="see-all">See all</div></a>    </ul></div>

Closing a div by clicking outside and clicking a button

You could bring all of your logic to the click listener and handle the elements' visibility in the function:

window.addEventListener('mousedown', function(event) {  var dropd = document.getElementById('dropdown');  var img = document.getElementById('menu');
  if (event.target === img && dropd.style.display === "none") {    dropd.style.display = "block";  } else if (event.target != dropd && event.target.parentNode != dropd) {    dropd.style.display = 'none';  }});

<img id="menu" alt="img" /><ul id="dropdown" class="dropdown-breadcrumb" style="width: 40px;">  <li>First</li>  <li>Second</li></ul>

Use jQuery to hide a DIV when the user clicks outside of it

Had the same problem, came up with this easy solution. It's even working recursive:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Slide panel close on click outside

Use a slightly modified structure. Also add targeting for the close by adding || close.contains(e.target) to the if () { ... } condition. Like this:

!slide.contains(e.target) && !open.contains(e.target)) || close.contains(e.target)

It works reliably.

const open = document.getElementById("open");
const slide = document.getElementById("slide");
const close = document.getElementById("close");

open.onclick = function () {
    slide.classList.toggle("active");
};

document.onclick = function (e) {
    if (!slide.contains(e.target) && !open.contains(e.target) || close.contains(e.target)) {
        slide.classList.remove("active");
    }
};

.main {
    max-width: 600px;
    overflow: hidden;
}

#slide {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    transform: translateX(100%);
    border: 1px solid;
}

#slide.active {
    transform: translateX(0);
}

<div class="main">
    <span id="open">Click to open</span>
    <div id="slide">
        <div id="close">X</div>
        <span class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta.
            Aspernatur, soluta?
        </span>
        Aliquid, sit alias. Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates? Earum quaerat nam dignissimos cumque perspiciatis assumenda? Exercitationem aspernatur officiis vel earum consequatur illo
        ullam minima!
    </div>
</div>

React closing a dropdown when click outside

You need to handle the ref passed so that it actually attaches to something:

const Home = forwardRef(({ open, setOpen }, ref) => {
  console.log(open);

  return (
    <section ref={ref}>
      <h1>Feels good to be home!</h1>

      <button className="secondary" onClick={() => setOpen(!open)}>
        Dropdown Toggle
      </button>

      {open && (
        <ul>
          <li>One</li>
          <li>Two</li>
        </ul>
      )}
    </section>
  );
});

Edit React withClickOutside (forked)