Question

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

问题是，如果我创建＆＃34;关注者＆＃34;在区域div内部，图像似乎被认为是其确定鼠标状态的父母的一部分，因此即使在鼠标位于区域之外它仍然存在。（如果我足够快地移动鼠标，光标将会逃脱，并且跟随者会消失。）

以下是我使用的代码：

$("#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/

我也尝试过创建＆＃34;关注者＆＃34;在一个单独的div中，它可以工作，但会导致图像奇怪的闪烁，如下所示：http://jsfiddle.net/cgWdF/187/

任何帮助，这一点，将不胜感激。只要没有看到闪烁的影响，跟随者是否在区域div内创建并不重要。另外，我希望尽可能保持代码的紧凑，但我会尽我所能。

Answer 1

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

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

<强> CSS

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

可能有更好的方法可以解决这个问题，但这是我现在能想到的最简单的方法。

希望这有帮助！

请参阅FIDDLE。

Javascript：Child不应该从Parent继承鼠标状态

1 个答案: