编写EasyCluster 1.6的mainleft的时候,遭遇了大量Firefox和IE不一样的js代码,如runtimeStyle, event.srcElement, parentElement, attachEvent。这些都是IE中管用的,在Firefox中要换成style, event.target, parentNode, addEventListener。Firefox中runtimeStyle和parentElement是没有的,而IE中style, runtimeStyle, parentElement, parentNode都是有的。
具体看下面的代码,下面的代码很简单,就是给所有的tr(除了id为roottr的)加上onmouseover, onmouseout事件(鼠标移入和移出的时候加背景和改变光标):
具体看下面的代码,下面的代码很简单,就是给所有的tr(除了id为roottr的)加上onmouseover, onmouseout事件(鼠标移入和移出的时候加背景和改变光标):
<
script language
=
"
javascript
"
>
// process tr backgrounds and cursor
var trarray, i, normalColor;
trarray = document.getElementsByTagName( " tr " );
<%
// firefox or IE?
String useragent = request.getHeader( " user-agent " );
if (useragent.indexOf( " Firefox " ) == - 1 ) {
%>
for (i = 0 ; i < trarray.length; i ++ ) {
if (trarray[i].id != " roottr " ) {
trarray[i].attachEvent( " onmouseover " , ProcessMouseOver);
trarray[i].attachEvent( " onmouseout " , ProcessMouseOut);
}
}
function ProcessMouseOver(event)
{
if (event.srcElement.tagName.toLowerCase() == " td " ) {
normalColor = event.srcElement.parentElement.style.backgroundColor;
event.srcElement.parentElement.runtimeStyle.backgroundColor = " #F7D12A " ;
event.srcElement.parentElement.runtimeStyle.cursor = " pointer " ;
}
if (event.srcElement.tagName.toLowerCase() == " a " || event.srcElement.tagName.toLowerCase() == " img " ) {
normalColor = event.srcElement.parentElement.parentElement.style.backgroundColor;
event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor = " #F7D12A " ;
event.srcElement.parentElement.parentElement.runtimeStyle.cursor = " pointer " ;
}
}
function ProcessMouseOut(event)
{
if (event.srcElement.tagName.toLowerCase() == " td " ) {
event.srcElement.parentElement.runtimeStyle.backgroundColor = normalColor;
event.srcElement.parentElement.runtimeStyle.cursor = "" ;
}
if (event.srcElement.tagName.toLowerCase() == " a " || event.srcElement.tagName.toLowerCase() == " img " ) {
event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor = normalColor;
event.srcElement.parentElement.parentElement.runtimeStyle.cursor = "" ;
}
}
<%
} else {
%>
for (i = 0 ; i < trarray.length; i ++ ) {
if (trarray[i].id != " roottr " ) {
trarray[i].addEventListener( " mouseover " , ProcessMouseOver, false );
trarray[i].addEventListener( " mouseout " , ProcessMouseOut, false );
}
}
function ProcessMouseOver(event)
{
if (event.target.tagName.toLowerCase() == " td " ) {
normalColor = event.target.parentNode.style.backgroundColor;
event.target.parentNode.style.backgroundColor = " #F7D12A " ;
event.target.parentNode.style.cursor = " pointer " ;
}
if (event.target.tagName.toLowerCase() == " a " || event.target.tagName.toLowerCase() == " img " ) {
normalColor = event.target.parentNode.parentNode.style.backgroundColor;
event.target.parentNode.parentNode.style.backgroundColor = " #F7D12A " ;
event.target.parentNode.parentNode.style.cursor = " pointer " ;
}
}
function ProcessMouseOut(event)
{
if (event.target.tagName.toLowerCase() == " td " ) {
event.target.parentNode.style.backgroundColor = normalColor;
event.target.parentNode.style.cursor = "" ;
}
if (event.target.tagName.toLowerCase() == " a " || event.target.tagName.toLowerCase() == " img " ) {
event.target.parentNode.parentNode.style.backgroundColor = normalColor;
event.target.parentNode.parentNode.style.cursor = "" ;
}
}
<%
}
%>
< / script>
// process tr backgrounds and cursor
var trarray, i, normalColor;
trarray = document.getElementsByTagName( " tr " );
<%
// firefox or IE?
String useragent = request.getHeader( " user-agent " );
if (useragent.indexOf( " Firefox " ) == - 1 ) {
%>
for (i = 0 ; i < trarray.length; i ++ ) {
if (trarray[i].id != " roottr " ) {
trarray[i].attachEvent( " onmouseover " , ProcessMouseOver);
trarray[i].attachEvent( " onmouseout " , ProcessMouseOut);
}
}
function ProcessMouseOver(event)
{
if (event.srcElement.tagName.toLowerCase() == " td " ) {
normalColor = event.srcElement.parentElement.style.backgroundColor;
event.srcElement.parentElement.runtimeStyle.backgroundColor = " #F7D12A " ;
event.srcElement.parentElement.runtimeStyle.cursor = " pointer " ;
}
if (event.srcElement.tagName.toLowerCase() == " a " || event.srcElement.tagName.toLowerCase() == " img " ) {
normalColor = event.srcElement.parentElement.parentElement.style.backgroundColor;
event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor = " #F7D12A " ;
event.srcElement.parentElement.parentElement.runtimeStyle.cursor = " pointer " ;
}
}
function ProcessMouseOut(event)
{
if (event.srcElement.tagName.toLowerCase() == " td " ) {
event.srcElement.parentElement.runtimeStyle.backgroundColor = normalColor;
event.srcElement.parentElement.runtimeStyle.cursor = "" ;
}
if (event.srcElement.tagName.toLowerCase() == " a " || event.srcElement.tagName.toLowerCase() == " img " ) {
event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor = normalColor;
event.srcElement.parentElement.parentElement.runtimeStyle.cursor = "" ;
}
}
<%
} else {
%>
for (i = 0 ; i < trarray.length; i ++ ) {
if (trarray[i].id != " roottr " ) {
trarray[i].addEventListener( " mouseover " , ProcessMouseOver, false );
trarray[i].addEventListener( " mouseout " , ProcessMouseOut, false );
}
}
function ProcessMouseOver(event)
{
if (event.target.tagName.toLowerCase() == " td " ) {
normalColor = event.target.parentNode.style.backgroundColor;
event.target.parentNode.style.backgroundColor = " #F7D12A " ;
event.target.parentNode.style.cursor = " pointer " ;
}
if (event.target.tagName.toLowerCase() == " a " || event.target.tagName.toLowerCase() == " img " ) {
normalColor = event.target.parentNode.parentNode.style.backgroundColor;
event.target.parentNode.parentNode.style.backgroundColor = " #F7D12A " ;
event.target.parentNode.parentNode.style.cursor = " pointer " ;
}
}
function ProcessMouseOut(event)
{
if (event.target.tagName.toLowerCase() == " td " ) {
event.target.parentNode.style.backgroundColor = normalColor;
event.target.parentNode.style.cursor = "" ;
}
if (event.target.tagName.toLowerCase() == " a " || event.target.tagName.toLowerCase() == " img " ) {
event.target.parentNode.parentNode.style.backgroundColor = normalColor;
event.target.parentNode.parentNode.style.cursor = "" ;
}
}
<%
}
%>
< / script>