Как в javascript “закрывать” div при клике вне этого дива?

При клике по некоторому элементу управления на экране появляется div c текстом подсказок
У дива есть кнопка "закрыть". Но хочется, чтобы он закрывался не только по клику на кнопку, но и вне области этого div'a. Подскажите, как это реализовать?     

Ответы

Ответ 1

Вот красивое решение:
$(document).mouseup(function (e) {
    var container = $("YOUR CONTAINER SELECTOR");
    if (container.has(e.target).length === 0){
        container.hide();
    }
});

что означает следующее - если клик был по области, которая НЕ является нашим div'ом или не содержится в нем, то скрыть блок.
Это решает проблему, если клик был по элементу вложенному в блок (не по самому блоку). Элемент будет скрыт, только если клик по области ВНЕ div'a


Ответ 2

Вот нашёл хороший ответ:



$(".button").click(function() {
  $('.toggled_block').toggle();
});
$(document).on('click', function(e) {
  if (!$(e.target).closest(".parent_block").length) {
    $('.toggled_block').hide();
  }
  e.stopPropagation();
});
.parent_block {
  width: 200px;
  height: 100px;
}
.button {
  width: 200px;
  height: 50px;
  background: #00BB65;
  border-radius: 5px;
  overflow: hidden;
}
.toggled_block {
  width: 200px;
  height: 50px;
  background: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  display: none;
}


  

  




Ответ 3

document.onclick = function() {
  document.getElementById('nav').style.display = 'none'
}
#nav {
  float: left;
  width: 150px;
  background: red;
  height: 100px;
}





В данном случае обработчик повешен на документ, а можно - на родителя.


Ответ 4

Вот решение на нативном JS, которое учитывает скрытие соседнего элемента по повторному клику на сам элемент. А также скрытие по области вне самого элемента.

ES6 синтаксис



let hamburger = document.querySelector('.hamburger');
let menu = document.querySelector('.menu');

const toggleMenu = () => {
  menu.classList.toggle('active');
}

hamburger.addEventListener('click', e => {
  e.stopPropagation();

  toggleMenu();
});

document.addEventListener('click', e => {
  let target = e.target;
  let its_menu = target == menu || menu.contains(target);
  let its_hamburger = target == hamburger;
  let menu_is_active = menu.classList.contains('active');
  
  if (!its_menu && !its_hamburger && menu_is_active) {
    toggleMenu();
  }
})
* {
  font-family: sans-serif;
}

.page {
  display: flex;
}

.hamburger {
  background-color: #222;
  width: 100px;
  height: 100px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.hamburger .line {
  width: 70px;
  height: 10px;
  margin-left: 10px;
  background-color: #fff;
  pointer-events: none;
}
.hamburger .line:not(:last-child) {
  margin-bottom: 10px;
}

.menu {
  display: none;
  background-color: #222;
  color: #fff;
  padding: 5px 0;
}
.menu .item {
  padding: 5px 15px;
  cursor: pointer;
}
.menu.active {
  display: inline-block;
}

  
  

    
One
    
Two
    
Three
  





ES5 синтаксис

'use strict';

var hamburger = document.querySelector('.hamburger');
var menu = document.querySelector('.menu');

var toggleMenu = function toggleMenu() {
  menu.classList.toggle('active');
};

hamburger.addEventListener('click', function(e) {
  e.stopPropagation();

  toggleMenu();
});

document.addEventListener('click', function (e) {
  var target = e.target;
  var its_menu = target == menu || menu.contains(target);
  var its_hamburger = target == hamburger;
  var menu_is_active = menu.classList.contains('active');

  if (!its_menu && !its_hamburger && menu_is_active) {
    toggleMenu();
  }
});


Ответ 5

Вариант на чистом JS



document.addEventListener('click', function(event) {
  var e=document.getElementById('test');
  if (!e.contains(event.target)) e.style.display='none';
});
#test{float:left;width:100px;height:100px;background:red;}