Javascript в хром

Question

У меня есть div, который onmouseover отображает панель, а onmouseout заставляет ее исчезнуть. Код Javascript выглядит следующим образом:

function ShowPanel() {
    document.getElementById("thePanel").style.display = "inline";
}

function HidePanel() {
    document.getElementById("thePanel").style.display = "none";
}

Код отлично работает в Firefox и IE. Проблема в хроме. Это работает, пока мышь не находится на текстовом поле на панели. Когда мышь нажимает на текстовое поле, вызывается событие onmouseout, даже если текстовое поле является частью панели и должно оставаться открытым.

Answer 1

Что вам нужно, так это поведение события onmouseenter вместо onmouseover и onmouseleave вместо onmouseout. Проблема в том, что эти события работают только в IE (на самом деле они правильно поняли). Вам нужно либо смоделировать это поведение с учетом всех различий в обработке событий в разных браузерах, либо просто использовать хорошую библиотеку JavaScript, которая позаботится об этом за вас. Например, jQuery имеет .mouseenter () и .mouseleave () , которые имитируются в браузере, которые не поддерживают эти события изначально, и даже хороший ярлык .hover ( ) чтобы установить оба одновременно.

Я бы не рекомендовал делать это вручную, если вы действительно не знаете всех причуд и несоответствий моделей событий в разных браузерах (и не знаете с тех пор, как задали этот вопрос), но если вы хотите посмотреть, как это делает jQuery затем посмотрите events.js и найдите mouseenter и mouseleave.

Answer 2

В Chrome, как вы обнаружили, событие mouseout вызывается всякий раз, когда вы переходите от родительского элемента (для которого зарегистрирован обработчик) и дочерних элементов, содержащихся в нем.

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

В качестве альтернативы, в вашем обработчике mouseout посмотрите на свойство toElementсобытия, и просмотрите его родительский список и посмотрите, есть ли ваш первоначальный родитель в этом списке.Обрабатывайте свое действие только в том случае, если его нет в списке.

document.getElementById('outer').addEventListener('mouseout', function(ev) {
    var el = ev.toElement;
    while (el && el !== document.body) {
        if (el === this) {
            console.log('mouseout ignored');
            return; // enclosed - don't do anything
        }
        el = el.parentNode;
    }
    console.log('mouseout');
}, false);

демо на http://jsfiddle.net/raybellis/s4EQT/