onmouseout срабатывает внутри элемента, для которого он установлен

В настоящее время я переключаю меню своего сайта с чистого JavaScript на jQuery. Мое меню имеет эффект выкатывания/выкатывания.

Меню имеет внешнюю оболочку с установленным событием onmouseout. Если это срабатывает, связанныйTarget проверяется, является ли он дочерним элементом внешней оболочки. Если нет, произойдет роллин.

Что происходит прямо сейчас, так это то, что если мышь перемещается из внутренней оболочки меню (это для центрирования фактического меню) во внешнюю оболочку меню, срабатывает onmouseout. Кажется, есть крошечная часть, которая не принадлежит menuOuterWrapper.

Сайт сейчас недоступен, поэтому я подготовил Fiddle здесь. Вы увидите проблему, если переместите указатель мыши из серой области над ручкой в ​​левую или правую темную область. Меню появится, а затем сразу же исчезнет. Роллинг должен происходить только тогда, когда мышь перемещается из внешней оболочки, то есть под темно-серую область (или светло-серую область ручки). Чтобы увидеть темно-серые области, вам, возможно, придется увеличить ширину блока результатов. [РЕДАКТИРОВАТЬ: я уменьшил внутреннюю ширину до 600 пикселей, поэтому теперь темные области должны быть видны по умолчанию.]

SO говорит мне, что я должен включать код при ссылке на JSFiddle. Я не хочу нарушать правила, но буду честен: я понятия не имею, откуда взялась проблема. Моя лучшая идея заключается в том, что я допустил ошибку в своей реализации isChildOf, поэтому я дам вам это:

jQuery.fn.isChildOf = function (parentId) {
    if ($(this).parents("#" + parentId).length > 0) {
      return true;
    } else {
      return false;
    }
};

$('#outer').on('mouseout', function(event) {
    if (!$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

Хотя это минимальный пример, я сделал почти то же самое с чистым JS, где все работало нормально. Так что я предполагаю, что это что-то в части jQuery. Поскольку это мои первые шаги с jQuery, это даже более вероятно.

Любая помощь, которую вы можете оказать, высоко ценится :)

[ОБНОВЛЕНИЕ]

У меня это работает сейчас. Проблема заключалась в том, что я не проверял связанную цель как «внешнюю». Поэтому, когда мышь покидает div содержимого и входит во внешний div, срабатывает mouseout и, конечно же, external не является дочерним элементом самого себя. Поэтому я изменил его на

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&    
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

и это решило проблему.


javascript jquery css onmouseout
person Dennis    schedule 19.12.2013    source источник
comment
Я не вижу никаких проблем со скрипкой, у меня работает нормально (хром)   -  person igor    schedule 19.12.2013
comment
он отлично работает, приятель... проверьте наличие addon или plugin в вашем браузере, которые могут чему-то мешать!   -  person NoobEditor    schedule 19.12.2013
comment
Я только что проверил это с хромом и firefox каждую ночь в Linux (Debian Wheezy) и с Chrome, Firefox, Opera и IE в Windows 7. Chrome и Firefox ведут себя так, как описано в обеих ОС: переход от серой области к темно-серой зона выкатывается в меню и тут же снова вылетает. Opera и IE вообще не запускают развертывание. Но на самом сайте (здесь локально) они делают то же самое.   -  person Dennis    schedule 19.12.2013
comment
на самом деле это работает и для меня. Он рушится только после выхода из серых зон.   -  person nowhere    schedule 19.12.2013
comment
Я забыл упомянуть: вам придется увеличить ширину панели результатов, пока ее ширина не станет больше 960 пикселей, извините. Ты сделал это?   -  person Dennis    schedule 19.12.2013
comment
Увеличена ширина почти до 2 полных экранов и протестировано с FF 26.0 на Win7. Кажется, все в порядке.   -  person Dan Iveson    schedule 19.12.2013
comment
Хорошо, это странно. Как может быть, что я могу воспроизвести поведение на разных машинах с разными ОС и разными браузерами, в то время как на всех остальных оно работает? Хорошие новости в том, что моя общая идея, кажется, все еще работает ;) Надеюсь, кто-то тоже получит такое поведение. Между тем, спасибо за проверку к вам.   -  person Dennis    schedule 19.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

если я правильно понял ваш вопрос.

Это может помочь

$('#inner').on('mouseover', function() {
        mouseIsOverMenu = true;
        setTimeout(menu_rollout, 500);
    });

    $('#inner').on('mouseout', function(event) {
        if (!$(event.relatedTarget).isChildOf("outer")) {
            mouseIsOverMenu = false;
            menu_rollin();
        }
    });

Что я сделал, так это изменил идентификатор #outer на #inner.

person Vikas Sharma    schedule 19.12.2013
comment
Спасибо за ваш вклад, но если бы я использовал это, меню не открывалось бы, когда вы наводите курсор на внешнюю оболочку, а не на дескриптор. Меню также должно закрыться, когда вы покинете внешнюю оболочку. Ваше изменение не закроет его, если оставить внешнюю оболочку слева или справа от центрированной внутренней оболочки. - person Dennis; 19.12.2013

arrow_upward
0
arrow_downward

Это грязный хак, но ваша проблема, похоже, заключается в том, что функция mouseout применяется слишком часто, и какая функциональность вам действительно нужна, так это захват мыши, покидающей нижнюю часть меню/контента.

Вот некоторый код, который будет делать именно это.

$('#outer').on('mouseout', function(event) {
    if(event.clientY >= document.getElementById('outer').offsetHeight){
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

вот связанный jsFiddle

person Mike    schedule 19.12.2013