Блог

Я знаю, что mouseenter кодируется таким образом, что он распространяет наведение курсора мыши на все элементы в DOM, к которым он привязан.

Итак, как указано в вопросе, есть ли способ вручную применить это распространение к другим элементам, отдельным от DOM, к которым я привязал событие mouseenter.

Функция $.stopPropagation() останавливает распространение, но есть ли функция applyPropagationTo, подобная функции?

Вот сценарий:

Допустим, у меня есть div, class=divCON. У меня есть абсолютный позиционированный div, добавленный к телу, называемый divHOV, который скрыт. Когда я наведу указатель мыши на divCON, divHOV становится видимым и следует за моей мышью, когда я нахожусь в divCON.

Я хочу, чтобы при перемещении моей мыши в divCON мышь имела тенденцию входить в divHOV, если браузер медленно перемещает divHOV при перемещении мыши. Я хочу, чтобы я мог распространять mouseenter divHOV на divCON, чтобы событие mouseleave не запускалось при переходе на divHOV.

jsFiddle: http://jsfiddle.net/vuxcR /

Обратите внимание, что когда мышь вводит divHOV, она покидает divCON. Я хочу, чтобы это было так, чтобы, когда он не оставлял divCON, когда я ввожу divHOV.

Скрипка: http://jsfiddle.net/vuxcR/1 /

Вот желаемый код. Смотрите Комментарии и внизу для объяснения:

 $(document).ready(function() {
    var $divCON = $(".divCON");
    $divCON.bind("mouseenter", function() {

        //Cancel if this function has already run (so, if the next element
        //  has class divHOV
        if($(this).next().hasClass('divHOV')) return;
        $divHOV = $("<div class='divHOV'></div>");
        $divHOV.mousemove(function(ev){
            var offset = $divCON.offset();

            var height = $divCON.height();
            var width = $divCON.width();

            var left = offset.left;
            var top = offset.top;

            var bottom = top   height;
            var right = left   width;

            // If the mouse coordinates are within the box
            if(ev.pageX >= left amp;amp; ev.pageX <= right amp;amp;
               ev.pageY >= top amp;amp; ev.pageY <= bottom){

                //Trigger move.
                $divHOV.css({'top': ev.pageY - 3   'px', 'left': ev.pageX   3   'px'});
            }
        });
        $(this).after($divHOV);
    });
    $divCON.bind("mousemove",function(e) {
        $(".divHOV").css({'top': e.pageY - 3   'px', 'left': e.pageX   3   'px'});
    });
});
  

Когда пользователь вводит .divCON в первый раз, .divHOV добавляется. При перемещении мыши (см. Внизу) divHOV снова позиционируется. После ввода мыши .divHOV координаты вычисляются снова, если мышь находится в поле divCON .

Когда мышь .divCON снова вводится, функция немедленно возвращается, потому .divHOV что уже существует : if($(this).next().hasClass('divHOV')) return; .