Форум

developer_ · #1 (**permalink**) 26.09.2012, 17:26

Есть окно которое появляется при onclik в input. Окно представляет собой таблицу с кучей кнопок и текста. Как сделать так чтобы при клике вне таблице она исчезала(удалялась). Примерно так работает datapicker в jquery.
Я перепробывал много вариантов но все они работали по разному в разных браузерах.
Кто как справляется с такой проблемой?
P.S. В названии темы стоит div для понятности. Я могу обернуть table в div, сути дела не меняет.

bes · #2 (**permalink**) 26.09.2012, 17:44

способы разные, мне нравится накрыть всё прозрачным (или не очень) div-ом, по клику на него скрывать

developer_ · #3 (**permalink**) 26.09.2012, 17:52

Впринципе интересный способ.Я даже когда то такой пробовал - проблема только была с высотой этого прозрачного дива, если страница была больше экрана. Но мне в данном случае не подойдёт.

bes · #4 (**permalink**) 26.09.2012, 17:56

position: fixed; height: 100%; width: 100%; z-index: 100;
у окна соответственно z-index больше

developer_ · #5 (**permalink**) 26.09.2012, 18:08

Когда я делал заливку экрана то height: 100% довало заливку экрана, а размер страницы увеличевался посредством ajax. Поэтому надо было вычеслять реальный размер текущего экрана. Каждый браузер это делал по разному. Вобщем как всегдаобычный геморой на пустом иесте. Нюансов я не помню давно было. Но мне сейчас такой подход не подходит.
Пока делаю на лютых граблях. Примерно так:

function hide_all(ev) {
        var tgt = window.event ? window.event.srcElement : ev.target;
        if (tgt.parentNode.className !== "cd_tbl") {
            input.parentNode.removeChild(cd_table);
            document.onclick = ''
        }
    }

    document.onclick = hide_all;

где cd_table - таблица
input - input при клике по каторому создаётся таблица.

эта функция вызывается в конце создания таблици

Вылез очередной геморой - какогото hide_all вызывается сразу и при этом объект который вызвал onclick это input

Сейчас ищу как обнулить onclick перед строчкой
document.onclick = hide_all
но походу такого понятия в javascript нету.

cyber · #6 (**permalink**) 26.09.2012, 18:27

моя реализация blur && focus

<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
      display:none;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body >
    <a href='#' id='action' >open/close</a>
    
    <div id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
 <div id='inform'></div>

    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      
     function Focus_and_Blur(opt){
      
      var elem = opt.elem, focusForElem;
        
       var body = document.body;
        
       elem.setAttribute('tabindex',-1);  
       body.setAttribute('tabindex',-1); 
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      body.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      body.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
        
        
        focusForElem = true;
        event.cancelBubble = true;
        opt.focus.call(this,e);
          
      }
      
        function onDocumentFocus (e) {
        
         
          
          if (focusForElem) {
            
             if(parent(e))return;
            
            focusForElem = false;
            opt.blur.call(elem,e)
          }
        }
      
       function parent (e) {
       
         var target = e.target || event.scrElement;
         var parent = target;
         
         while (parent && parent != elem) {
         
          parent = parent.parentNode;
         }
         
        
         return parent == elem;
       
       }
       
       
      };
      
      
      var elem = document.getElementById('block');
      
  
      Focus_and_Blur({
        elem:elem,
        focus:function (e) {
         
          _("#inform").innerHTML = 'focus on '+ this.id;

        },
        blur: function (e) {
         
         _("#inform").innerHTML = 'blur  '+ this.id;
          
           elem.style.display = '';
       
        }
      });
      
      
      _("#action").onclick = function () {
      
        elem.style.display = 'block';
        elem.focus();
      
      
      }
    </script>

  </body>
</html>

bes · #7 (**permalink**) 26.09.2012, 18:36

Сообщение от developer_

Вылез очередной геморой - какогото hide_all вызывается сразу и при этом объект который вызвал onclick это input

события всплывают
второй способ: вешать обработчик клика на body, но отсекать те из них, которые идут от таблицы и её дочерних элементов

Форум

Справочник

Discord чат

Курсы javascript