Javascript：子项不应从父项继承鼠标状态

Question

我正在尝试创建一个跟随鼠标移动但仅存在于特定区域内的小图像。我正在使用 javascript/jquery 在鼠标进入该区域时创建图像并在鼠标离开时将其删除。

问题是，如果我在区域 div 内创建 "follower"，图像似乎被认为是确定鼠标状态的父图像的一部分，因此即使在之后它仍然存在鼠标在该区域之外。（如果我移动鼠标的速度够快，光标就会消失，随从也会消失。）

这是我使用的代码：

$("#area").mouseenter(function() {
    $("#area").append("<img id='follower' src='follower.png'/>");
});

$("#area").mousemove(function(event){
    $("#follower").css("top",event.pageY-35);
    $("#follower").css("left",event.pageX-35);
});

$("#area").mouseleave(function() {
    $("#follower").remove();
});

JSFiddle：http://jsfiddle.net/cgWdF/186/

我还尝试在单独的 div 中创建 "follower"，这有效但会导致图像出现奇怪的闪烁，如下所示：http://jsfiddle.net/cgWdF/187/

任何帮助，将不胜感激。跟随者是否在 div 区域内创建并不重要，只要看不到闪烁效果即可。另外，我希望代码尽可能紧凑，但我会尽我所能。

Answer 1

发生这种情况是因为您 mouseleave 所在的元素不是您认为会发生的元素。事实上，你的精灵正在触发事件，因为那时你的指针在它上面。

为防止这种情况发生，您可以强制页面取消精灵上的所有指针事件。通过这样做，#area 将按预期触发您的指针事件。 css 规则 pointer-events 可能对此有所帮助。

CSS

#follower {
    position: absolute;
    height: 80px;
    pointer-events: none;
}

可能有更好的方法来处理这个问题，但这是我目前能想到的最简单的方法。

希望对您有所帮助！

参见 FIDDLE。

Javascript：子项不应从父项继承鼠标状态

Javascript: Child should not be inheriting mouse state from Parent

javascript

jquery

mouseenter

mouseleave