Привязка событий Onblur - PullRequest
       3

Привязка событий Onblur

0 голосов
/ 19 августа 2010

Я нахожусь в процессе изучения Javascript и пытаюсь создать простое выпадающее меню.Пример моей желаемой функциональности можно увидеть на главной странице Google в верхнем меню с раскрывающимися списками «еще» и «настройки».В частности, щелчок по меню и меню исчезают.

Возможно, onblur() - неправильная функция для вызова.Я не знаю.У меня есть этот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 

<style type="text/css"> 
a 
{ 
    color:blue; 
} 

.info ul.submenu 
{ 
    border: solid 1px #e0e0e0; 
    background-color: #fff; 
    position: absolute; 
    padding: 0; 
    z-index: 2; 
    display: none; 
} 

.info ul.submenu li 
{ 
    display: block; 
    border-top: solid 1px #e0e0e0; 
    margin: 0px 10px 0 10px; 
} 

.info ul.submenu li a 
{ 
    display: block; 
    padding: 7px 0px 6px 0; 
    color: #1177ee; 
    cursor:pointer; 
} 

</style> 

<script type="text/javascript"> 

function menu(id) {    
    var myLayer = document.getElementById(id);    

    myLayer.onblur = function() {      
        myLayer.style.display = 'none';  
    };  

    if (myLayer.style.display == "none" || myLayer.style.display == "") {    
        myLayer.style.display = "block";    
    } else {    
        myLayer.style.display = "none";    
    }    
} 

</script> 
</head> 

<body> 
<div class="info">    
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text   
     <a onclick="menu('id2');">Another Link</a> | more text   
     <ul id="id1" class="submenu">    
       <li><a href="dfhdfh">A1</a></li>    
       <li><a href="aetjetjsd">A2 This is Long</a></li>    
       <li><a href="etetueb">A3</a></li>    
     </ul>    
    <ul id="id2" class="submenu">    
       <li><a href="dfhdfh">B1</a></li>    
       <li><a href="aetjetjsd">B2</a></li>    
       <li><a href="etetueb">B3</a></li>    
     </ul>    
  </div>   
</body> 
</html> 

Событие onblur просто не работает.Я понятия не имею, почему.

(Да, я знаю, что я не должен использовать закрытие)

Ответы [ 2 ]

2 голосов
/ 19 августа 2010

Это не стрельба, потому что UL никогда не получает фокус.Просто показывать это не дает ему фокус.

Два способа решить:показать это внутри функции menu(..).Это не очень хорошо, потому что технически вы не хотите focus выпадение, и будет побочный эффект прямоугольника фокуса, нарисованного вокруг вашего UL.

* 1016обработчик onclick для документа, который будет скрывать любое видимое меню.
0 голосов
/ 19 августа 2010

Как описано здесь:

http://www.devguru.com/technologies/ecmascript/quickref/evhan_onblur.html

Событие onblur срабатывает только на следующих элементах:

Кнопка, флажок, FileUpload, Layer, Password, Радио, Сброс, Выбрать, Отправить, Текст, TextArea, Окно.

Похоже, вы пытаетесь использовать это событие для элемента UL.Вместо этого я бы порекомендовал использовать событие onclick на document, чтобы скрыть всплывающее окно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...