Question

我用Raphael创建了一系列按钮，它使用了我借用here的特殊悬停功能（参见第一个解决方案），它基本上告诉悬停以保持“徘徊”。无论我的光标是在文本还是圆圈上，我都在圈内。我已经使用了它，如jsfiddle所示 - 悬停函数可以在代码的最顶部找到，并在代码的底部激活。但是，每当我用任何其他包含以下内容的div包围Raphael画布时：

css边距和填充
div中的内容

特殊悬停功能停止工作，如here所示。当光标移动到圆圈中间的文本部分时，我的圆形按钮会恢复到悬停前状态。我已经意识到如果我将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;
}

客户端X，客户端Y＆＃39;准确的部分 - 在做了一些研究后，在我看来，可能函数正在进行涉及整个页面的计算，并且内容和边距/填充导致错误计算或根本没有计算。我错了。我只是Javascript / Raphael的初学者。我的问题是：是什么导致我的悬停功能无法正常工作，是否有任何解决方案/解决方法？三江源。

Answer 1

我想不出一个简单的答案，所以这有点繁琐，但可能有用。注意，我认为这不适用于Opera，但我认为它可能仅仅是检查它处理事件坐标（clientX或layerX等）的方式。

text { pointer-events: none; }

将关闭文本对象的事件。然后，这将允许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"
            });
        };
    });

注意，我不是特别喜欢用户界面，我认为你想要做的是非直观的，在一个事件上有一个动画对象，在一个不基于那个的单独区域上有一个单独的事件动画里面。这感觉不对，但它可能会找到正确的解决方案。

jsfiddle

拉斐尔悬停功能在其他div周围不起作用

1 个答案: