Question

编辑：在写完我的问题之后，我发现toFront()代码可能会重新创建DOM中不同位置的元素。当它首先删除元素时，它可能会丢失为IE和Opera附加的任何事件，因此我的问题。我将处理一个委托的事件替代方案，但仍然愿意接受建议。

我在Raphael纸上有形状，当你将它们悬停在它们上面时，它们会发光。但是，由于这些形状直接位于彼此的位置，为了确保你看到周围的光芒，我必须将当前的形状带到前面。

当前元素位于顶部，因此它的发光将出现在相邻形状的顶部。我的代码在Webkit和Firefox中运行良好，但它在Opera或IE中不起作用。

一旦我添加到前端代码中，mouseout事件就永远不会在Opera / IE中触发。

请参阅my example on JS Fiddle which is broken for Opera/IE。如果您注释掉toFront()行，它将在所有浏览器中按预期触发mouseout事件。

在那个例子中 - 由于鼠标输出会触发，因此发光仍然存在 - 每个形状会产生多个发光。我可以通过在添加之前检查发光来解决此问题，但这不能解决问题。

编辑2：所以我想出a solution that uses single variable to store the glow object似乎解决了这个问题。有趣的是，在包含div的mouseout事件实际上并没有在Opera中调用（没有检查IE）。 Awww man，如此接近:(

Answer 1

这在Opera中适用于我，没有在IE中尝试过，但它应该可以工作：

paper.forEach(function(element) {
    element.hover(function() {
       if (!glow) {
           this.toFront();
           glow = this.glow({ color: "#555", width: 10 });
       }
    },
    function(){
       glow.remove();
       glow = false;        
    }             
);
});

http://jsfiddle.net/76bjf/

带着Raphael.js走向前方

1 个答案: