Javascript: [ onmouseover ] и [ onmouseout ] событие

Общая проблема

Представьте себе выпадающее меню, например, и когда вы mouse over по ссылке появляется выпадающий список.

Но, как вы можете прочитать в статье ниже, с ней возникают проблемы, когда вы наводите указатель мыши на ссылку (для некоторых браузеров все внутри элемента) поле исчезает. Проблема исходит от event bubbling,

В моем документе onmouseover а также onmouseout являются delayed with 0.5 seconds и вы можете видеть, что иногда элемент начинает вибрировать из-за этой проблемы.

--------------
| Layer      |.onmouseout = doSomething;
| --------   |
| | Link | ----> We want to know about this mouseout
| |      |   |
| --------   |
| --------   |
| | Link |   |
| |    ----> | but not about this one
| --------   |
--------------
---->: mouse movement

Прочитайте эту статью для лучшего понимания:

www.quirksmode.org - Javascript - События мыши

Решение Quirksmode 

function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}

Мой документ

Вы можете найти мой полный документ здесь:

JS Bin - Мои документы

Вы можете найти оригинальный документ без mouseEvent(e) функция здесь:

JS Bin - Оригинал

Наведите курсор мыши на кнопку, затем наведите курсор мыши на прямоугольник, затем быстро наведите курсор мыши и быстро вернитесь к блоку, после чего он начнет вибрировать. (На Firefox 3.6 Windows 7)

Javascript

<script type="text/javascript">
function mouseEvent(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}
function toggleByType(id, type, e){
    setTimeout(function(){
        var element = document.getElementById(id);
        if(element.style.display == type){
            mouseEvent(e);
            element.style.display = 'none'; 
        } else {
            element.style.display = type;   
        }
    }, 500);
}
</script>

HTML

<div class="box-container" onmouseover="toggleByType('box','block');" onmouseout="toggleByType('box','block', event);">
    <a href="#" class="box-bridge">Show Box</a>
    <div id="box" class="box" style="display:none;">
            Mouse out and this will dissapear.
            <br />
            <a href="#">Roll over to have problems</a>
        </div>
</div>

Моя проблема

Решение, которое дает причудливый звук, звучит логично, однако я не знаю, how to use the function Я пробовал разными способами то, что я написал, только один, но я не понимаю, поэтому я был бы очень рад, если бы вы могли помочь мне сделать эту работу.

Источник

2 ответа

Почему бы не использовать чистый CSS? С метатегом:hover вы можете легко настроить это меню без использования JS. Работает со всеми современными браузерами (кроме pre-IE 7).

Пример:

.box { display: none }; .box-container:hover .box { display: block }
Источник

Ты пропускаешь event в onmouseover атрибут:

onmouseover="toggleByType('box','block', event);"

Но вы по-прежнему задерживаетесь на 500 мс, прежде чем появится меню.

Источник
Другие вопросы по тегам