Javascript: [onmouseover] и [onmouseout] событие - PullRequest
Новая
       20

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

0 голосов
/ 01 сентября 2010

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

Представьте себе, например, раскрывающееся меню, и когда вы 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 - Original

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

0 голосов
/ 01 сентября 2010

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

Пример: 

.box { display: none }; .box-container:hover .box { display: block }
0 голосов
/ 01 сентября 2010

Вам не хватает event в атрибуте onmouseover: 

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

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

...