Javascript 拉斐尔悬停函数不'；当你和其他人在一起时，你不会工作

我用Raphael创建了一系列按钮，它使用了我借用的一个特殊的悬停功能（参见第一个解决方案），它基本上告诉悬停保持“悬停”在我在圆圈内的任何位置，不管我的光标是在文本上还是圆圈上。我使用了它，如图所示-悬停功能可以在代码的最顶部找到，并在代码的底部激活。但是，每当我用包含以下内容的任何其他div环绕拉斐尔画布时：

• css边距和填充
• div中的内容

特殊悬停功能停止工作，如图所示。所发生的是，每当我的光标进入圆圈中间的文本部分时，我的圆圈按钮就会回复到预悬停状态。我已经意识到，如果我把Raphael画布放在html代码中所有其他div之上，它就会工作，或者如果我删除所有内容和样式，它就会工作。两种选择我都做不到。我想这可能与故障有关：

Raphael.el.hoverInBounds = function (inFunc, outFunc) {

    var inBounds = false;

    // Mouseover function. Only execute if `inBounds` is false.
    this.mouseover(function () {
        if (!inBounds) {
            inBounds = true;
            inFunc.call(this);
        }
    });

    // Mouseout function
    this.mouseout(function (e) {
        var x = e.offsetX || e.clientX,
            y = e.offsetY || e.clientY;

        // Return `false` if we're still inside the element's bounds
        if (this.isPointInside(x, y)) return false;

        inBounds = false;
        outFunc.call(this);
    });

    return this;
}

---

确切地说，“clientX，clientY”部分——在做了一些研究之后，我觉得可能函数正在进行涉及整个页面的计算，并且内容和边距/填充会导致计算错误或根本没有计算。我可能错了。我只是Javascript/Raphael的初学者。我的问题是：是什么导致我的悬停功能无法正常工作，是否有任何解决方案/解决方法？谢谢。

我想不出一个简单的答案，所以这有点麻烦，但可能有用。注意，我认为这在Opera中不起作用，但我认为这可能只是检查它如何处理事件坐标（clientX或layerX等）的一个例子

将关闭文本对象的事件。这将允许svg形状执行所有事件，否则会发生冲突

由于现在仍然需要事件，您可以在元素上添加一个额外的mousemove处理程序，然后检查它是否在文本本身的边界区域内

您将需要做一些调整，使其感觉正确，可能需要将选中的区域调整为比边界框大几个像素

this.mousemove( function(e) {
        var x = e.layerX || e.offsetX || e.clientX,
            y = e.layerY || e.offsetY || e.clientY;
        var bb = this.text.getBBox();
        if( (x >= bb.x) && (x <= bb.x + bb.width) && (y>=bb.y) && (y<=bb.y+bb.height) ) {
            label.attr("text", this.text.attr("href"));
        } else {
            label.attr({
               text: "Mouse over on circles for file name"
            });
        };
    });

this.mousemove（函数（e）{
var x=e.layerX | e.offsetX | e.clientX，
y=e.layerY | | e.offsetY | | e.clientY；
var bb=this.text.getBBox（）；
如果（（x>=bb.x）&&（（x=bb.y）&&&&（y）认为这项工作是一种享受！是的，我确实同意我的UI设计似乎有点不对劲，甚至对我来说有点笨重，但我的客户很快就喜欢上了这个特殊的设计……但无论如何：）再次感谢。
this.mousemove( function(e) {
        var x = e.layerX || e.offsetX || e.clientX,
            y = e.layerY || e.offsetY || e.clientY;
        var bb = this.text.getBBox();
        if( (x >= bb.x) && (x <= bb.x + bb.width) && (y>=bb.y) && (y<=bb.y+bb.height) ) {
            label.attr("text", this.text.attr("href"));
        } else {
            label.attr({
               text: "Mouse over on circles for file name"
            });
        };
    });