我知道对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/