자바 스크립트 메뉴 및 onblur 문제

그래서 자바 스크립트 메뉴를 생성하고 collaspe 있도록 사용자가 메뉴 밖에서 뭔가를 클릭하면에 대한 위해 onblur 이벤트를 구현하기 위해 노력하고있어.자바 스크립트 메뉴 및 onblur 문제

이를 구현하려면 단순히 창에 이벤트를 부착하고 클릭을 보였다과이나 그 부모 요소가 특정 기준을 충족하지 않은 경우 다음 나는 메뉴를 종료합니다.

내가 iframe이있을 때까지이 잘 작동하고 사용자가 iframe을 내부에서 클릭합니다. 나는 이것에 이벤트를 붙이려고했는데 아무것도 작동하지 않는 것 같다. 또한, 더 많이 보았고 클릭 이벤트를 첨부하면 iframe의 몸체가 만들어져 교차 도메인 스크립팅 가능성이 생길 수있었습니다. 누구든지 어떤 아이디어가 있습니까 ??

출처

2009-07-28 Anonymous

어떻게 흐리게 메뉴를합니까? 만 입력 요소는 내가 할 것입니다 방법은 좋은 옵션 –

확실하지만 당신은 윈도우 객체에 위해 onblur를 첨부 할 수 있습니다 그리고 그 같은 iframe을 같이 또는 브라우저 외부 문서, 외부에서 클릭을 캐치 할 필요 없습니다. 당신은 onclick의 측면에서 적절하게 기능하기 위해서 그것으로 작업해야 할 것입니다.

출처

2009-07-28 20:20:21

... 포커스를받을! –

난 당신이 마우스 클릭을 찾고있는 이유를 모르겠어요. 나에게 거꾸로 조금 보인다. 대신 메뉴에 onmouseout 및 onmouseover 이벤트를 사용하는 것이 좋습니다.

<!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> 
    <title>Menu Test</title> 
</head> 

<body> 
     <script type="text/javascript"> 
      function displayMenu(menuListBlockID, menuTextBlockID) { 
       var menuTextBlock = document.getElementById(menuTextBlockID) 
       menuTextBlock.style.backgroundColor = "green"; 
       var menuListBlock = document.getElementById(menuListBlockID); 
       menuListBlock.style.display = "block"; 
      } 
      function hideMenu(menuListBlockID, menuTextBlockID) { 
       var menuTextBlock = document.getElementById(menuTextBlockID) 
       menuTextBlock.style.backgroundColor = "#C00000"; 
       var menuListBlock = document.getElementById(menuListBlockID);    
       menuListBlock.style.display = "none"; 
      } 
     </script> 

     <div id="menu"> 
      <div id="firstMenuItem" onmouseover="displayMenu('firstMenuItemList','firstMenuItemText')" onmouseout="hideMenu('firstMenuItemList','firstMenuItemText')" style="float:left"> 
       <span id="firstMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;" >Menu Item 1 |</span> 
       <div id="firstMenuItemList" style="display:none;color:White; border:solid 1px green; padding:2px;"> 
        <a href="Test.Html">One</a><br /> 
        <a href="Test.Html">Two</a> 
       </div> 
      </div> 
      <div id="secondMenuItem" onmouseover="displayMenu('secondMenuItemList','secondMenuItemText')" onmouseout="hideMenu('secondMenuItemList','secondMenuItemText')" style="float:left"> 
       <span id="secondMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;">Menu Item 2</span> 
       <div id="secondMenuItemList" style="display:none;color:White; border:solid 1px green;"> 
        <a href="Test.Html">Three</a><br /> 
        <a href="Test.Html">Four</a> 
       </div> 
      </div> 
     </div> 
    </div> 

</body> 

</html>

나는 메뉴 항목을 그룹화 한 방법을 참고하시기 바랍니다 : 여기에

빠른 예입니다. 모든 메뉴 항목을 함께 그룹화하는 기본 메뉴 DIV가 있습니다. 각 메뉴 항목에는 해당 항목의 제목과 실제 메뉴 링크를 그룹화하는 고유 한 DIV가 있습니다. onmouseover 및 onmouseout 이벤트는 메뉴 항목 블록에 적용됩니다. 즉, 최종 사용자가 메뉴 항목 블록 내의 아무 곳이나 가리킬 때마다 열려있게됩니다.

출처

2009-07-28 20:27:33 Frinavale

하하에는 창이 없다 –

음 : 이 당신을 위해 밖으로 작동 희망 수 있습니다 클릭 이벤트 .. – Frinavale

어, 그래서 당신이 말한 그 고침을 적용하려고했는데, 주사위는 없었습니다. 매번 메뉴의 앵커 태그 위에 마우스를 올려 놓으려고 할 때마다 마우스가 메뉴 밖으로 이동했다고 생각합니다. –

자바 스크립트 메뉴 및 onblur 문제

답변

관련 문제