0

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

这是每个六边形形状的mouseover/mouseout代码（六边形是对 rafael 元素的引用，this/_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.logs在那里检查这绝对是这种情况。

任何建议，将不胜感激！

4

1 回答 1

1

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

您可以使用 IE 的mouseenterandmouseleave而不是标准的mouseoverandmouseout来实现一致的行为。当然，您将不得不退出 Raphaël 的 API 并单独实现这些：绑定另一个事件侦听器并传递 IE 特定的事件类型，因为您必须调用版本 6-8 的遗留代码，使用这些代码，attachEvent或者addEventListener版本 9 以后。

您可以在有关该主题的 quirksmode 文章中阅读有关这些 IE 特定事件的更多信息。

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

于 2012-05-09T15:08:16.457 回答