Javascript Menu OnBlur Issue

Итак, я создаю javascript-меню и пытаюсь реализовать событие onblur, когда пользователь щелкает что-то вне меню, поэтому он будет collaspe.Javascript Menu OnBlur Issue

Чтобы реализовать это, я просто привязал событие к окну и искал любые клики, и если он или его элементы-родители не соответствовали определенным критериям, я бы закрыл меню.

Это работает нормально, пока у меня нет iframe, и пользователь нажимает внутри iframe. Я попытался связать события с этим, и ничего не работает. Кроме того, я выглядел немного больше, и если бы я привязал событие click к телу iframe, который мог бы создать кросс-доменную скриптингу. У кого-нибудь есть идеи??

источник

2009-07-28 Anonymous

Как вы размываете меню? Только элементы ввода получают фокус ... –

Не уверен, но вы можете подключить onblur к объекту окна, и это должно ловить любые клики за пределами документа, такие как iframe или даже вне браузера. Вам просто придется работать с этим, чтобы надлежащим образом выполнять функцию onclick.

источник

2009-07-28 20:20:21

нет окна на событии клика .. – 2009-07-29 18:53:06

Я не уверен, почему вы ищете щелчки мыши. Кажется, немного назад для меня. Вместо этого вы должны просто использовать события 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

ха-ха, который может быть хорошим вариантом – 2009-07-28 20:43:52

Ну вот как я это сделаю :) Надеюсь, он сработает для вас! – Frinavale

Ehhh, поэтому я попытался применить это исправление, о котором вы говорили, без кубиков. Каждый раз, когда я пытаюсь навести курсор на тег привязки в меню, он думает, что мышь вышла из меню. – 2009-07-29 13:25:09

Javascript Menu OnBlur Issue

ответ

Смежные вопросы