结合Raphael和jQuery实现浏览器兼容

Question

发现 IE 不处理 javascript onmouseout 后，我决定使用 jQuery 来代替，这样跨浏览器兼容性就会自动得到处理。我正在制作一个由 svg 路径定义的区域，当鼠标悬停在其上方时，该区域会亮起，并且我改编了 Raphael 网站上提供的代码 澳大利亚示例。

在此代码中，澳大利亚的每个州都由拉斐尔路径定义，例如塔斯马尼亚：

 aus.tas = R.path("...").attr(attr);

然后将该路径（'st'）传递给函数：

st[0].onmouseover = function () {
    ...
};

与我的预期相反，代码是 st[0 ].onmouseover 而不仅仅是 st.onmouseover。因此，路径实际上必须是一个数组，而 st[0] 无论是什么，都是悬停在上面的东西。

为了将 onmouseover 替换为 jQuery 等效项（我认为是 .mouseout()），我需要为 st[0] 分配一个类code> 这样我就可以用 jQuery 引用它。我的问题是，我该怎么做？如果代码是 st.onmouseover ，那就很简单了，但为什么路径 (st) 是一个数组呢？ st[0] 到底是什么？我到底该怎么做呢？

Answer 1

注意：该演示是使用旧版本的 Raphael 制作的。现在 Raphael 有自己的自定义事件处理程序，包括 .mouseover() 和 .hover()。

---

其缺点是：

只需包装 DOM 对象即可从中创建 jQuery 对象，或者使用Raphael内置的自定义事件处理程序：

$(st[0]).mouseover( ... );            // This uses the jQuery .mouseover() method

或者，可能更方便，并且支持IE：

$(st[0]).hover( ... );                //     This uses the jQuery .hover() method

或者，使用 Raphael 内置事件处理方法：

st.mouseover( ... );                 // This uses the Raphael .mouseover() method
st.hover( ... );                     //     This uses the Raphael .hover() method

---

长话短说：

您可以使用 节点 或 [0]，因为RaphaelObject[0] 始终是对 DOM 元素的引用：

aus.tas = R.path("...").attr(attr);

// aus.tas is a Raphael object
// aus.tas[0] is aus.tas.node is the reference to the DOM Object

$(aus.tas[0]).mouseover(function() {          // Could have also use aus.tas.node
    ...
});

// Raphael now has custom event handlers
aus.tas.mouseover(function() {
    ...
});
aus.tas.hover(function() {
    ...
}, function() {
    ...
});

因此，使用您的函数：

(function (st, state) {
      // st is a Raphael Object
      // st[0] is st.node is the reference to the DOM Object

      // This is now using jQuery for mouseover!
    $(st[0]).mouseover(function() {
        ...
    });
    ...
})(aus[state], state);

此外，我建议查看 jQuery .hover() 函数，它确实可以很好地处理 IE：

(function (st, state) {
      // This is now using jQuery not Raphael for hover!
    $(st[0]).hover(function() {
        ... // the mouseenter function
    }, function() {
        ... // the mouseleave function
    });
    ...
})(aus[state], state);

作为一个简化的演示，以下是如何绑定 mouseenter 和 mouseout 使用 .hover() 到 Raphael 元素（在 IE 8 中测试）：

​$(function() {
    var elie, paper = Raphael("canvas", 500, 500); 

      // Create Raphael element
    elie = paper.rect(0,0,100,100).attr("fill","#000");

      // Get reference to DOM object using .node and bind
      //     mouseover and mouseout to it:
    $(elie[0]).hover(function() {
        elie.attr("fill","#FFF");
    },function() {
        elie.attr("fill","#000");    
    });
});​

用这个 jsFiddle 尝试一下

此外，Raphael .hover() 方法似乎也可以在 IE 中工作。

Answer 2

您不需要为其分配一个类即可将其公开给 jQuery。当然不是。你可以简单地将 DOM 元素传递给 jQuery，它会为你带来魔力...

$(st[0]).mouseout(function() {
  alert("That mouse is outta here!");
};

你看到的是数组语法，因为这通常是 Javascript 库维护对原始元素的引用的方式（本质上只是“包装”它并添加功能）。伪代码解释...

st == Raphael element
st[0] == DOM element

Answer 3

如果您最终只是复制澳大利亚演示所使用的代码，那么无论您使用哪个处理程序（悬停、鼠标悬停等），您都会遇到 IE 问题。

在我敲了一段时间后，似乎悬停输入/输出函数中的 st.toFront() 取消了 IE 中的“鼠标移出”事件。从示例代码中删除这些行就可以了。

Answer 4

这有点javascript的诡计，st是传入的。看一下澳大利亚示例中的JS代码。

(function (st, state) {
                    .. some code referring to st[0] in here .. 
                })(aus[state], state);

所以这段代码中的st[0]指的是来自aus[state]的路径DOM节点。

在 Firebug 控制台中尝试一下这个简单的示例：

(function(a,b) {alert(a); })("hello", "b");

hth

Answer 5

就我而言，实际的问题是每毫秒调用 .toFront ，因为 .hover(fooFunction, outFunction) 在每次鼠标光标移动时都会调用 fooFunction 。实际上，这个名字很表明它是一个悬停调用，而不是 mouseenter :)

因此，诀窍是确保您的 fooFunction 或其内容仅执行一次（onmouseenter）。即使在 IE 中，这对我来说也很完美，无需访问任何 DOM 节点或尝试访问我不想接触的其他内容：

var MouseEventHelper = {
    hover: function (el, funcIn, funcOut) {
        var entered = false;

        el.hover(
            function (e) {
                if (entered) {
                    return;
                }

                funcIn(e);
                entered = true;
            },
            function (e) {
                funcOut(e);
                entered = false;
            }
        );
    }
}

然后像这样替换你的悬停调用：

var el = paper.rect(...);
MouseEventHelper.hover(
    el, 
    function (e) { 
        // do whatever you want!
        el.toFront();
    }
    function (e) { }
);