Mouseout事件未在Rafael.js中触发 [英] Mouseout event not firing in Rafael.js

问题描述

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

I have a number of shapes drawn using Raphael.js that I need to add a shadow to and enlarge slightly when the mouse rolls over. I have everything working perfectly in Firefox and Chrome, but in Internet Explorer, the mouseout event doesn't appear to fire.

这是我的鼠标悬停/鼠标输出代码每个六边形形状（六边形是对拉斐尔元素的引用，这个/ _Promise是对一个定义事件等级的类的引用）：

This is the mouseover/mouseout code I have for each hexagon shape (hexagon is a reference to the rafael element, this/_Promise being a reference to a class that defines the events among other things):

    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来检查这是绝对的情况。

In IE (up to and including version 9), the hexagon shapes just keep getting bigger and bigger because the mouseout event isn't firing. I've put some console.logs in there to check this is definitely the case.

任何建议都将不胜感激！

Any suggestions would be appreciated!

推荐答案

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

the event bubbling mechanism differs on IE, thus generates unstable behavior for mouseover / mouseout events, but their innovation (yes, we're still talking IE!) comes to the rescue.

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

you can use IE's mouseenter and mouseleave instead of the standard mouseover and mouseout in order to achieve a consistent behavior. you will, of course, have to step down from Raphaël's API and implement these separately: bind another event listener and pass the IE specific event types, as you will have to call legacy code for versions 6-8, use attachEvent on these, or addEventListener for version 9 onward.

你可以阅读有关这些IE特定事件的更多信息，请参见有关该主题的quirksmode文章。

you can read more about these IE-specific events on the quirksmode article on the subject.

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

if you prefer to use jQuery for this, they have already thought of that by providing mouseleave as part of the API.

这篇关于Mouseout事件未在Rafael.js中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！