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。