Форум

djonA · #1 (**permalink**) 30.03.2015, 01:24

Подскажите не могу разобраться.
Как скрыть div при клике в любое место кроме самого div

<div>123</div>

Заранее спасибо

Прошу прощения что не правильно назвал тему, вначале хотел по другому задать вопрос

Decode · #2 (**permalink**) 30.03.2015, 02:07

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div>123</div>
  <script>
    var div = document.getElementsByTagName('div')[0];

    document.addEventListener('click', function(e) {
      var target = e.target;
      if(target == div) return;
      div.style.display = "none";
    });
  </script>
</body>
</html>

djonA · #3 (**permalink**) 30.03.2015, 08:33

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

Но проблема в том что у меня есть input в который я начинаю вводить название городе и у меня снизу в div ajax'ом открывается всплывающая подсказка городов.

И вот мне надо когда div.style.visibility = 'visible' - при нажатии на любое место на сайте кроме этого div что бы он становился hidden, но разумеется после того как в него подгрузятся города.

А у меня он пропадает даже если я нажимаю на сам div

Делаю вот так:

<input id="city" name="city" size="30" autocomplete="OFF" onkeyup='PressKey(event)'/><br>
<div id="info" size=5 style='position:absolute;z-index:999;visibility:hidden'
	onchange="document.getElementById('city').value=this.options[this.selectedIndex].value"
	onkeyup='PressKey2(event)'>
</div>

<script>
    var div = document.getElementById('info');
	 
	    document.addEventListener('click', function(e) {
	      var target = e.target;
	      if(target == div) return;
	      div.style.visibility = "hidden";
	    });
</script>

Decode · #4 (**permalink**) 30.03.2015, 16:51

Так?

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input id="city" size="30" /><br>
  <div id="info"></div>
  <script>
    var div = document.getElementById('info'),
        input = document.getElementById('city');

    input.addEventListener('keyup', function() {
      div.innerHTML = this.value;
    });

    input.addEventListener('focus', function(e) {
      div.style.visibility = "visible";
    });

    input.addEventListener('blur', function(e) {
      div.style.visibility = "hidden";
    });
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript