Question

我使用Raphael.js绘制了许多形状，我需要添加阴影并在鼠标滚动时略微放大。我在Firefox和Chrome中完美地运行了一切，但在Internet Explorer中，mouseout事件似乎没有触发。

这是我对每个六边形形状的mouseover / mouseout代码（六边形是对rafael元素的引用，这个/ _Promise是对一个定义事件的类的引用）：

    this.hexagon.mouseover(function(){
        _Promise.hexagon.toFront();
        _Promise.hexagon.attr( { "transform": "...s" + scaleAmountOnRollover } );
        _Promise.shadow = _Promise.hexagon.glow({ "width": 8, "opacity": 0.4 });
    });

    this.hexagon.mouseout(function(){
        _Promise.hexagon.attr( { "transform": "...s" + (1/scaleAmountOnRollover) } );
        _Promise.shadow.remove();
    });

在IE（包括版本9）中，六边形形状只是越来越大，因为mouseout事件没有触发。我在那里放了一些console.log来检查这是肯定的情况。

任何建议都将不胜感激！

Answer 1

事件冒泡机制在IE上有所不同，因此会为mouseover / mouseout事件产生不稳定的行为，但是他们的创新（是的，我们仍然在谈论IE！）来拯救。

您可以使用IE的mouseenter和mouseleave代替标准mouseover和mouseout，以实现一致的行为。当然，你必须从Raphaël的API中退出并单独实现它们：绑定另一个事件监听器并传递IE特定的事件类型，因为你必须调用版本6-8的遗留代码，使用attachEvent在这些上，或addEventListener版本9以后。

您可以在the quirksmode article on the subject上阅读有关这些特定于IE的事件的更多信息。

如果您更喜欢使用jQuery，他们已经通过提供mouseleave作为API的一部分来考虑这一点。

Mouseout事件未在Raphael.js中触发

1 个答案: