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

Question

在发现IE不处理javascript之后onmouseout,我决定使用jQuery代替,以便自动处理跨浏览器的兼容性.当鼠标悬停在svg路径上时,我正在创建一个由svg路径定义的区域,并且我调整了Raphael网站上提供的来自澳大利亚示例的代码.

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

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

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

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

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

为了替换onmouseoverjQuery等价物(我相信是.mouseout()),我需要分配一个类,st[0]所以我可以用jQuery引用它.我的问题是,我该怎么做？如果代码是st.onmouseover直截了当的,但为什么path(st)是一个数组？到底是st[0]什么？我到底怎么了？

Answer 1

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

缺点:

只需将DOM对象包装成一个jQuery Object,或者使用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

很长一段时间:

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

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中的"鼠标输出"事件.从示例代码中删除这些行,你应该没问题.