结合Raphael和jQuery实现浏览器兼容性 [英] Combining Raphael and jQuery to achieve browser compatibility

问题描述

已经发现IE无法处理javascript onmouseout，因此我决定使用jQuery，因此跨浏览器的兼容性将得到自动处理.当鼠标悬停在上面时，我正在使由svg路径定义的区域变亮，并且我修改了Raphael网站上提供的代码，该代码来自澳大利亚的例子.

Having discovered that IE does not handle javascript onmouseout, I'm determined to use jQuery instead so the cross-browser compatibility would be taken care of automatically. I am making an area defined by an svg path light up when the mouse hovers over it, and I adapted the code provided on the Raphael website from the Australia example.

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

In this code, each state of Australia is defined by a Raphael path, for example Tasmania:

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

然后将此路径('st')传递给函数:

This path ('st') is then passed to the function:

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

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

Contrary to what I would have expected, the code is st[0].onmouseover as opposed to merely st.onmouseover. Thus, the path must actually be an array, and st[0], whatever that is, is the thing that is hovered over.

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

In order to replace onmouseover with the jQuery equivalent (which I believe is .mouseout()), I need to assign a class to st[0] so I can refer to it with jQuery. My question is, how do I do that? If the code was st.onmouseover it would be straightforward, but why is the path (st) an array? What exactly is st[0]? And how the heck do I get to it?

推荐答案

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

只需包装DOM对象即可制成jQuery对象，或使用内置的自定义事件处理程序中的Raphael:

Simply wrap the DOM Object to make a jQuery Object out of it, or use the Raphael built in custom event handlers:

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

或者，也许更方便，并且支持IE:

Or, probably more convenient, and IE supported:

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

或者，使用 内置的事件处理程序方法拉斐尔 :

Or, using a Raphael built in event handler method:

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

---

很长一段时间:

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

---

The long of it:

You can get the reference to the DOM object to work on using node or [0], since RaphaelObject[0] is always the reference to the DOM element:

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:

Additionally, I would suggest looking into the jQuery .hover() function, which does handle IE quite nicely:

(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);

作为简化的演示，下面是如何使用.hover()将mouseenter和mouseout绑定到Raphael元素(在IE 8中测试 ):

As a simplified demonstration, here is how to bind mouseenter and mouseout using .hover() to a Raphael element (tested in 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中使用.

Try it out with this jsFiddle

Additionally, the Raphael .hover() method seem to work in IE too.

这篇关于结合Raphael和jQuery实现浏览器兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！