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

64jmpszr 于 2022-11-29 发布在 jQuery

关注(0)|答案(2)|浏览(112)

这是我想要达到的目标：http://jsfiddle.net/fmvmA/ ``
我在这个例子中遇到了两个问题我认为这两者都与事件传播有关。当鼠标进入容器时，我希望有一个div跟随光标。当光标离开容器时，后面的div应该消失。这看起来应该很简单...但是我遇到了当你移动鼠标时div闪烁的问题，我猜是因为当工具顶部div出现时，鼠标从技术上离开了容器。
另外，我希望能够点击容器内部的任何地方，并将工具提示div的副本附加到被点击的位置。这个例子很挑剔...但是如果你设置偏移，使工具提示div不再覆盖鼠标，那么你就可以看到它的工作。
有没有简单的方法可以达到我的两个目标？

jquery

来源：https://stackoverflow.com/questions/9569927/propagating-javascript-events-through-a-tooltip-like-div

2条答案

按热度按时间

wribegjk1#

它会闪烁，因为#ghost在容器外部，所以当工具提示显示时，它会触发mouseout。将它移到容器内部，它应该已经设置好了。
DEMO

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
    });
});

赞(0）回复(0）举报 2022-11-29

eanckbw92#

这里有一个演示，工作，你需要调整一点附加的位置。我停留在方法的附加只在点击每原来的演示
http://jsfiddle.net/fmvmA/4/

赞(0）回复(0）举报 2022-11-29