Onblur 이벤트 바인딩

자바 스크립트를 배우는 중이고 간단한 드롭 다운 메뉴를 만들려고합니다. 원하는 기능의 예는 톱 메뉴의 Google 홈페이지에서 'more (추가)'및 'settings (설정)'드롭 다운으로 볼 수 있습니다. 특히 메뉴를 클릭하면 메뉴가 사라집니다.Onblur 이벤트 바인딩

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 이벤트가 단순히 작동하지 않습니다 이 코드가 있습니다. 나는 이유를 모른다.

은 UL에 포커스가 결코 때문에 그것은 발사 아니에요

출처

2010-08-19 Jim Roboju

(예 나는 클로저를 사용하지 않아야 알고있다). 그냥 보여주는 것은 초점을주지 않습니다. 그것을 해결하기

두 가지 방법 :

모두 UL들에 tabindex를 추가하고 menu(..) 함수 내에서 보여 후 myLayer.focus();를 호출합니다. 기술적으로는 focus을 드롭 다운하고 싶으므로 UL 주위에 그려지는 포커스 사각형의 부작용이 있기 때문에 이것은 좋지 않습니다.
보이는 메뉴를 숨길 문서에 onclick 처리기를 등록하십시오.

출처

2010-08-19 06:40:47 Strelok

여기에 설명 된 바와 같이 :

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

에 onblur 이벤트 만 불을 다음과 같은 요소에 :

이

버튼, 체크 박스,는 FileUpload는, 레이어, 비밀번호, 라디오, 재설정 , 선택, 제출, 텍스트, 텍스트 영역, 창.

UL 요소에서 해당 이벤트를 사용하려는 것 같습니다. 대신 document에 onclick 이벤트를 사용하여 팝업을 숨길 것을 권합니다.

출처

2010-08-19 06:57:56

Onblur 이벤트 바인딩

답변

관련 문제