我知道对mouseenter进行了编码,以便将mouseover传播到绑定(bind)到的DOM中的所有元素。

因此,就像问题状态一样,是否有一种方法可以手动将此传播应用于与DOM分离的其他元素,我将mouseenter事件绑定(bind)到了DOM。

函数$ .stopPropagation()停止传播,但是是否存在applyPropagationTo之类的函数?

这是场景:

假设我有一个div,class = divCON。我在 body 上附加了一个绝对位置的div,称为divHOV,它被隐藏了。当我将鼠标输入divCON时,当我在divCON中时,divHOV变为可见并跟随我的鼠标。

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

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

请注意,当鼠标进入divHOV时,如何鼠标离开divCON。我想要它,以便当我输入divHOV时不离开divCON。

最佳答案

小提琴: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 && 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;

关于javascript - 在jQuery中,有没有一种方法可以将事件手动传播到DOM对象上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7813566/

10-09 03:38