Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   очередь событий (https://javascript.ru/forum/events/53087-ochered-sobytijj.html)

ruslan_mart 22.01.2015 08:36
skrudjmakdak, если меню будет исчезать плавно через transition, то увидим по идее. Или скрывать меню не сразу, по минимальному setTimeout`у.

Но я бы на твоём месте забыл про blur, сделал бы по клику и проверял бы, что если клик произошёл не по input, то меню скрываем, а если по input - открываем.

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      window.addEventListener('click', function(e) {
        var self = e.target;
        if(self.id == 'test' == menuIsHide) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      });
    </script>

  </body>
</html>

skrudjmakdak 22.01.2015 08:41
ну без таба у меня и так работает)))

ruslan_mart 22.01.2015 08:50
skrudjmakdak, :)

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      test.onblur = function() {
        menu.style.display = 'none';
        menuIsHide = true;
      };
      
      window.addEventListener('click', function(e) {
        var self = e.target;
        if(self.id == 'test' == menuIsHide) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      });
    </script>

  </body>
</html>

ruslan_mart 22.01.2015 08:53
Или так:

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      window.onclick = test.onblur = function(e) {
        var self = e.target;
        if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      };
    </script>

  </body>
</html>

skrudjmakdak 22.01.2015 09:20
посм чуть попозже, ща занят

danik.js 22.01.2015 10:40
Цитата:
Сообщение от Ruslan_xDD
menuIsHide
Ну ты индеец )) menuIsHidden ("меню скрыто", а не "меню есть скрыть")

ruslan_mart 22.01.2015 10:46
danik.js, сам индеец. :D Я в английском не силён, так что пофиг. :)

skrudjmakdak 22.01.2015 10:57
я задолблю)) не работает, выше писал почему

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
		<div>1</div>
		<div>2
			<div>2.1</div>
			<div>2.2</div>
			<div>2.3</div>
		</div>
		<div>3</div>
	</div>

    <script>
      var menuIsHide = true;
      
      window.onclick = test.onblur = function(e) {
        var self = e.target;
        if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      };
	  function c(e) {
		console.log(e.target);
	  }
    </script>

  </body>
</html>


http://javascript.ru/forum/events/53...tml#post352603

ruslan_mart 22.01.2015 11:31
skrudjmakdak, если blur убрать, то работает. :) Наверное проще просто запретить табуляцию по полю. :)

ruslan_mart 22.01.2015 11:46 
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
		<div>1</div>
		<div>2
			<div>2.1</div>
			<div>2.2</div>
			<div>2.3</div>
		</div>
		<div>3</div>
	</div>

    <script>
      var menuIsHidden = true;
      
      window.onclick = window.onkeydown = function(e) {
        var self = e.target;
        if(self.id == 'test' == (menuIsHidden || e.type == 'keydown' && e.keyCode == 9)) {
          menu.style.display = menuIsHidden ? 'block' : 'none';
          menuIsHidden = !menuIsHidden;
        }
      };
      
      
	  function c(e) {
		console.log(e.target);
	  }
    </script>

  </body>
</html>


Часовой пояс GMT +3, время: 06:05.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице