Question

这是一个fiddle，展示了我正在尝试做的一个例子。（我知道它看起来不对，但它只需要一些改变，这不是我面临的问题：p）。

我使用Raphael SVG创建一个饼图，工具提示也是一个svg元素。

draw_tooltip(SVGpaper, this, 0);

用于清除工具提示。

问题是我不明白如何正确处理mouseover事件。在每个事件中，清除之前的工具提示后需要弹出工具提示，我尝试使用计数器进行管理。但是从小提琴中可以看出，鼠标悬停事件并不顺利。此外，它在转移到其他弧线时以及当它移出馅饼时保持均匀。

请提出一些解决方案！

Answer 1

我怀疑您遇到的问题是，为工具提示显示的新路径/元素是否会干扰鼠标事件，从而阻止事件发生。因此，如果拖动/移动，Raphael对于鼠标事件可能会有点繁琐。它可能有几种不同的方式。一个人可能更全面地处理事件并决定如何处理它们，或者如果你不介意，可以将工具提示从光标位置稍微移开。

arc.mouseover(function (e) {
     x = e.pageX + 50;
     y = e.pageY;
     draw_tooltip(this, 1, display_text, x, y);

});
arc.mouseout( function(e) {
    popup.remove();
    popup_txt.remove();
    transparent_txt.remove();
});

arc.mousemove( function(e) {
    popup.attr({ x: e.pageX - 70, y: e.pageY - 70 });
    popup_txt.attr({ x: e.pageX - 25, y: e.pageY - 45});
    transparent_txt.attr({ x: e.pageX - 120, y: e.pageY - 120 });
});

}

我还改变了rect和几位的路径，但主要是保持工具提示远离事件位置。否则我想知道你是否需要从jquery处理它，或者可能需要处理附加到除弧之外的其他元素的处理程序，这可能取决于页面的复杂性。看看这个解决方案是否可行。

在此处http://jsfiddle.net/74YNb/13/（文本对齐可能需要调整所有浏览器）

如何处理Raphael SVG的鼠标悬停事件

1 个答案: