javascript onmouseout применяется к div, выпущенному детьми

У меня возникли проблемы с поиском решения этого с помощью google, но я бы предположил, что это будет довольно распространенная проблема. У меня есть div, к которому я применил обработчик события onmouseout (обработчик используется для смены меню с помощью функции jQuery «slideup», так как я хотел бы, чтобы меню было скрыто, когда мышь уходит). Проблема в том, что дочерние элементы этого div также приводят к срабатыванию обработчика (я согласен, что это по дизайну из-за характера модели событий пузырьков). Теперь то, что я хотел бы знать, - это лучший способ игнорировать эти события, которые запускаются дочерними элементами divs, и только рулон меню вверх, когда мышь покидает div, к которому применяется событие.javascript onmouseout применяется к div, выпущенному детьми

Благодаря

источник

2009-08-15 Simon Fox

Спасибо за все быстрые ответы, принятый ответ оказался лучшим решением. –

То, что вы ищете, является мышь и мышь.

Хороший пример можно найти по этой ссылке (они сравнили как MouseEnter и MouseOver)

http://docs.jquery.com/Events/mouseover

Запись в блоге

http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse

источник

2009-08-15 03:38:08

hmm i dindt знать эти события – Cleiton

Примечание: это не стандартные события W3C. Они только изначально реализованы в IE ... jQuery заставляет их работать, связывая регулярные события mouseover/out и запуская только один раз, когда цель является целевой целью. – James

-2

Нет, это не дизайн, вы случайно приняли ваши «onmouseout» слишком много дивы. Вы только хотите применить его к одному.

источник

2009-08-15 03:33:32

Я применил его только к одному div, и если вы рассмотрите модель событий пузыря, я бы определил, что это поведение по дизайну. Посмотрите на ссылку на режим quirks в @Vineet Reynolds ответ на этот вопрос. –

Простите, но вы ошибаетесь. Вы применили его к более чем одному div. –

прочитал связанное сообщение –

-1

Simon вы можете проверить, кто инициировал событие, используя свойство jquery Event.target.

источник

2009-08-15 03:36:58 Cleiton

Вы можете попытаться отменить разбухание или распространение событий. Quirksmode.org имеет удобный раздел, объясняющий, как отключить барботирование или распространение в обеих моделях.

Поскольку JQuery представляет разработчикам W3C standards, вам не нужно будет устанавливать свойство cancelbubble. Вызов метода stopPropagation() будет достаточно.

источник

2009-08-15 03:47:39

Используйте «MouseEnter» и «MouseLeave» на родительском DIV вместо этого - дочерние элементы не будут влиять на «MouseLeave»

document.getElementById('Main_Menu_Container_Div').addEventListener('mouseenter',function(){ 
// do something like your 'slideup' or what ever you want. 
});

«Событие пузыриться», как известно, проблема - " событие на элементе2 имеет приоритет. Это называется пузырьковым событием ». http://www.quirksmode.org/js/events_order.html

Пример использования:

<style> 
.Child_Div_Button{ 
    float:left; 
    cursor:pointer; 
    height:100px; 
    width:100px; 
    background-color:#CCC; 
    border:#000 thin solid; 
    margin:2px; 
    padding:2px; 
} 


.Child_Div_Button:hover{ 
    background-color:#FFF; 
} 
</style> 
</head> 
<body> 

<div id="Parent_Div_Container" style="height:300px; width:300px; border:#333 thin solid; background-color:#D2FFFF;"> 
Parent Div 
<div id="button_container"> 
     <div class="Child_Div_Button"> 
     Button 1 Child Div 
     </div> 

     <div class="Child_Div_Button"> 
     Button 2 Child Div 
     </div> 
    </div> 

</div> 


<script type="text/javascript"> 

     document.getElementById('button_container').style.display = 'none';// initiate 

     document.getElementById('Parent_Div_Container').addEventListener('mouseenter',function(){ 
      document.getElementById('button_container').style.display = 'block'; 
     }); 
     document.getElementById('Parent_Div_Container').addEventListener('mouseleave',function(){ 
      document.getElementById('button_container').style.display = 'none'; 
     }); 



</script>

Кажется, работает в последней Firefox без необходимости Jquery - Но Chrome, IE и Safari, все, кажется, нужна библиотека Jquery для этой работы. Это значит, что mozila теперь полностью поддерживает использование mouseenter и mouseleave?!?! Если да .. Я! для браузера, который действительно помогает разработчикам:)

источник

2012-09-12 04:28:22 KDawg

javascript onmouseout применяется к div, выпущенному детьми

ответ

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