通过类似工具提示的div传播JavaScript事件

Question

这是我想要实现的jfiddle: http://jsfiddle.net/fmvmA/ 我遇到了两个问题，它们都与事件传播有关。当鼠标进入容器时，我希望一个div跟随鼠标移动。当鼠标离开容器时，这个div应该消失。这似乎很简单...但是当鼠标移动时，我遇到了div闪烁的问题，我的猜测是因为当tooltip div出现时，鼠标技术上已经离开了容器。 此外，我想能够在容器内的任何位置单击，并将tooltip div的副本附加到所单击的位置。这个例子有点棘手...但如果您将偏移量设置为tooltip div不再重叠鼠标，则可以看到它的工作方式。 有没有简单的方法来实现我的两个目标？

- ThePromoter

Answer 1

它闪烁是因为当工具提示显示时，它会触发mouseout事件，因为#ghost在容器外部。将其移动到内部，一切都应该设置好了。

演示

HTML：

<div id="container">
  <div id="ghost">
    Click to drop me!
  </div>
</div>

编辑：我注意到一个错误，当它在容器内时，#ghost不会隐藏，即使移动到容器外面..所以我给#ghost添加了一个偏移量，使其出现在光标下方2px。

JS代码：

$('#container').on('mousemove', function(event) {
    $('#ghost').css({
        left: event.pageX - $('#ghost').width() / 2,
        top: ((event.pageY - $('#ghost').height() / 2) + 2) // +2 px is the offset
    });
});

- Selvakumar Arumugam

---

感谢您的快速回复！我发现您的解决方案中有一个问题，就是鼠标移出容器后，幽灵div不会隐藏。此外，它还允许您在容器外部单击并放置一个框。 你有什么想法吗？ - ThePromoter

@ThePromoter 你试过我的DEMO链接了吗？还可以看看我编辑的帖子。 - Selvakumar Arumugam

是的，那就是我在测试你的解决方案时使用的链接。如果我慢慢将鼠标移出容器，那么文本就会被压缩在一起，这会导致div的高度增加，使得鼠标再次位于其中。我确实看到了你的解决方案可能会起作用，但有没有办法让它在鼠标直接指向ghost时也能起作用呢？再次感谢你的帮助！ - ThePromoter

如果我将幽灵的宽度设置为已知的值，就能够实现您的解决方案......以避免文本压缩。 我会接受您的答案，但我仍然很想知道在鼠标指针位于幽灵内部时是否有一种方法可以做到这一点 :) - ThePromoter

Answer 2

这是一个可行的演示，您需要稍微调整附加位置。我仍然使用了原始演示中仅在单击时附加的方法。

http://jsfiddle.net/fmvmA/4/

- charlietfl

---

你的解决方案似乎行得通...但只有在幽灵 div 的位置偏离鼠标时才能实现。有什么变通方法可以让幽灵 div 实质上将点击事件传递给容器 div 处理，或者我只是在请求一些不可能的事情？谢谢！ - ThePromoter

如果您首先将 ghost 添加到容器中，那么即使鼠标在 ghost 下方，它仍然会悬停在容器上。否则，您将触发容器的 mouseleave 事件。如果首先添加，则可能需要为其添加一个类或其他内容...以便在单击不发生时轻松删除。 - charlietfl