javascript – 带来Raphael.js前面的光芒

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

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

这个当前元素位于顶部,因此它的发光将出现在相邻形状的顶部.我的代码在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男子,如此接近:(

解决方法:

这在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/

标签：javascript,svg,raphael
来源： https://codeday.me/bug/20190902/1791538.html