在 jQuery 中，有没有办法手动将事件传播到 DOM 对象上？

Question

我知道 mouseenter 是这样编码的，它会将鼠标悬停传播到它所绑定的 DOM 中的所有元素。

所以，就像问题所述，有没有办法手动将此传播应用于与 DOM 分离的其他元素，我将 mouseenter 事件绑定到。

$.stopPropagation() 函数会停止传播，但是否有类似 applyPropagationTo 的函数？

场景如下：

假设我有一个 div，class=divCON。我有一个绝对定位的 div 附加到正文，称为 divHOV，它是隐藏的。当我鼠标进入 divCON 时，divHOV 变得可见，并在我进入 divCON 时跟随我的鼠标。

我希望这样当我的鼠标在 divCON 中移动时，如果浏览器在移动鼠标时重新定位 divHOV 的速度很慢，则鼠标往往会进入 divHOV。我想要它，以便我可以将 divHOV 的 mouseenter 传播到 divCON 上，这样当我继续 divHOV 时不会触发 mouseleave 事件。

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

注意当鼠标进入 divHOV 时，它会离开 divCON。我想要它，这样当我进入 divHOV 时它不会鼠标离开 divCON。

Answer 1

小提琴：http://jsfiddle.net/vuxcR/1/

这是所需的代码。解释见 cmets 和底部：

$(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 && ev.pageX <= right &&
               ev.pageY >= top && 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;。