Raphael悬停函数没有'与其他潜水艇在一起时不起作用

Raphael hover function doesn't work when around other divs

本文关键字：其他 潜水艇 在一起 不起作用 函数 悬停 Raphael      更新时间：2023-09-26

我用Raphael创建了一系列按钮，使用了我在这里借用的特殊悬停功能（见第一个解决方案），它基本上"告诉"悬停在我在圆圈内的任何时候都保持"悬停"，无论我的光标是在文本上还是在圆圈上。我已经使用了它，如这个jsfiddle所示——悬停函数可以在代码的最顶部找到，并在代码的底部激活。然而，每当我用包含以下内容的任何其他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等）的一个例子。

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

注意，我不是特别喜欢UI，我认为你想做的是不直观的，在一个事件上有一个动画对象，而在一个不基于内部动画的单独区域中有一个单独的事件。这感觉不对，但它可能会在一定程度上找到正确的解决方案。

jsfiddle

相关文章：