mouseenter / mouseleave игнорирование закрывающего элемента

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

Однако, когда я наводю указатель мыши на цель, срабатывает центр мыши, и элемент E накрывает ее. Это покрытие в дальнейшем запускает событие mouseleave, поэтому E исчезнет. Это дополнительно запускает событие mouseenter, поэтому снова появляется E ..... Что является настоящей головной болью.

Итак, в основном, мне интересно, существует ли версия mouseenter / mouseleave, которая заботится только о том, входит ли мышь в клиентские прямоугольники цели или выходит из нее, независимо от того, покрыто или нет.

обновление: @arunopjohny создал скрипт JS, чтобы проиллюстрировать эту проблему. См. Комментарии


jquery mouseevent mouseenter mouseleave
person user690421    schedule 27.02.2014    source источник
comment
Вы можете поместить перекрывающийся элемент в качестве потомка цели, чтобы события mouseenter / mouseleave не запускались.   -  person Arun P Johny    schedule 27.02.2014
comment
Проблема в том, что цель встроена, тогда как E - уровень блока. Указание E как потомка цели сведет браузер с ума .. @ArunPJohny   -  person user690421    schedule 27.02.2014
comment
показывает ли jsfiddle.net/arunpjohny/9fNcY/1 вашу проблему   -  person Arun P Johny    schedule 27.02.2014
comment
@ArunPJohny Точно, спасибо за это. Как вы можете видеть, возникает короткий сбой, когда запускается последовательность (mouseenter, mouseleave, mouseenter) вместо одного mouseenter.   -  person user690421    schedule 27.02.2014

Ответы (2)


arrow_upward
7
arrow_downward

Нашел идеальное решение в соответствующем вопросе: Игнорировать взаимодействие с мышью при наложении изображения

«События-указатели: нет»; свойство отключит любое событие мыши элемента. Что еще более важно, событие вместо этого «перейдет» к элементу под ним. Использование этого в элементе наложения E в моем вопросе решает проблему.

person user690421    schedule 27.02.2014

arrow_upward
0
arrow_downward

Пытаться

jQuery(function ($) {
    $('#target').hover(function () {
        var $target = $(this);
        clearTimeout($target.data('hoverTimer'));
        $('#e').show();
    }, function () {
        var $target = $(this);
        var timer = setTimeout(function () {
            $('#e').hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#e').hover(function () {
        clearTimeout($('#target').data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});

Демонстрация: Fiddle

person Arun P Johny    schedule 27.02.2014
comment
Это решило проблему, когда цель и E имеют одинаковое положение и размер. Но если E больше, чем цель, он не исчезнет, ​​когда вы переместите мышь только за цель. - person user690421; 27.02.2014
comment
@ user690421 можете ли вы помочь воссоздать проблему в скрипке? - person Arun P Johny; 27.02.2014
comment
да. Это иллюстрирует проблему. Но, возможно, это желаемое поведение при второй мысли. - person user690421; 27.02.2014
comment
@ user690421 каково желаемое поведение? - person Arun P Johny; 27.02.2014
comment
Решение найдено, как упоминалось в моем собственном ответе. Спасибо за приятное обсуждение. Вот скрипка: jsfiddle.net/Up5jY - person user690421; 27.02.2014
comment
Желаемое поведение заключается в том, что E вообще не должен взаимодействовать с событием мыши. Он должен только показывать и скрывать, а вход или выход мыши зависит исключительно от цели. - person user690421; 27.02.2014