100分求解,关于IE和Firefox中javascript的event.x,event.y的问题
100分求解,关于IE和Firefox中javascript的event.x,event.y的问题
写了个Chart图表,如题问题始终不能解决,
改成event.pageX或event.clientX也不行
请各位高人帮忙,感激不尽
代码如下,保存为htm文件即可运行
<HTML>
<HEAD>
<title>Create Line Chart</title>
<script language="javascript">
<!--
var ChartLeft=50;
var ChartTop=50;
var ChartWidth=780;
var ChartHeight=350;
var bShow = false;
var data=new Array(157,159.4,152.8);
var sDate=new Array('2007/01/01','2007/01/02','2007/01/03');
var fMax=166;
var fMin=146.2;
var TargetWeight=154.4;
var iType=1;
document.onmousemove = mMouseMove;
//Show Msg
function mMouseOver(v,obj)
{
if(v==-1)
detail.innerHTML= '<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=White><TR><TD Align=right>Target Weight: '+TargetWeight+' Kg</TD></TR></TABLE>';
else
detail.innerHTML= '<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=White><TR><TD Align=right>'+sDate[v]+'<br>'+data[v]+'</TD></TR></TABLE>';
if (bShow == false)
{
detail.style.visibility = "visible";
bShow = true;
}
}
//hide Msg
function mMouseOut(obj)
{
bShow = false;
detail.style.visibility = "hidden";
}
//move Msg
function mMouseMove(obj)
{
//var event=obj||window.event;
//var mX = event.x ? event.x : event.pageX;
//var mY = event.y ? event.y : event.pageY;
detail.style.left =event.x;//mX;
detail.style.top = event.y;//mY;
}
function makeDiv(x, y, w, h)
{
document.write('<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' + w + 'px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);background-color:Blue;"><\/div>');
}
function DrawLine(x1,y1,x2,y2)
{
if(x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1;
var s = 2;//this.stroke;
if(dx >= dy)
{
if(dx > 0 && s-3 > 0)
{
var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.ceil(s/2);
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while(dx > 0)
{--dx;
++x;
if(p > 0)
{
makeDiv(ox, y, x-ox+ad, _s);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
makeDiv(ox, y, x2-ox+ad+1, _s);
}
else
{
if(s-3 > 0)
{
var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.round(s/2);
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if(y2 <= y1)
{
++ad;
while(dy > 0)
{--dy;
if(p > 0)
{
makeDiv(x++, y, _s, oy-y+ad);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
makeDiv(x2, y2, _s, oy-y2+ad);
}
else
{
while(dy > 0)
{--dy;
y += yIncr;
if(p > 0)
{
makeDiv(x++, oy, _s, y-oy+ad);
p += pru;
oy = y;
}
else p += pr;
}
makeDiv(x2, oy, _s, y2-oy+ad+1);
}
}
}
//-->
</script>
</HEAD>
<body leftmargin="0" rightmargin="0" topmargin="0" >
<!--small window to show data-->
<DIV id="detail" style= "BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 4; VISIBILITY: hidden; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute"></DIV>
<div align="center" style= "POSITION: relative; TOP: 15px"><label id="Title" name="Title">abcde</label></div>
<div align="center" style= "POSITION: relative; TOP: 415px"><label id="Msg">abcde</label></div>
<script language="javascript">
<!--
switch(iType)
{
case 1:
Title.innerHTML="Weight Trend ( Kg )";
//draw background
document.write("<div style='position:absolute;z-index:-1;left:50px;top:50px;width:780px;height:350px;clip:rect(0,780px,350px,0);background-color:#dee7ec'></div>");
//draw TargetWeight line
document.write("<div onmouseover='mMouseOver(-1,this)' onmouseout='mMouseOut(this)' style='position:absolute;z-index:1;left:"+(ChartLeft)+"px;top:"+(ChartTop+ChartHeight-(TargetWeight-fMin)*ChartHeight/(fMax-fMin))+"px;width:780px;height:2px;clip:rect(0,780px,2px,0);background-color:red'></div>");
break;
case 2:
Title.innerHTML="BMI Trend";
//draw background
document.write("<div style='position:absolute;z-index:-1;left:50px;top:50px;width:780px;height:140px;clip:rect(0,780px,140px,0);background-color:#FFBE73'></div>");
document.write("<div style='position:absolute;z-index:-1;left:50px;top:190px;width:780px;height:70px;clip:rect(0,780px,70px,0);background-color:#FFDEDE'></div>");
document.write("<div style='position:absolute;z-index:-1;left:50px;top:260px;width:780px;height:85px;clip:rect(0,780px,85px,0);background-color:#9CCFFF'></div>");
break;
case 3:
Title.innerHTML="BMR Trend ( Kcal / day )";
break;
case 4:
Title.innerHTML="BodyFat Trend ( % )";
document.write("<div style='position:absolute;z-index:-1;left:50px;top:50px;width:780px;height:85px;clip:rect(0,780px,85px,0);background-color:#FFBE73'></div>");
document.write("<div style='position:absolute;z-index:-1;left:50px;top:135px;width:780px;height:55px;clip:rect(0,780px,55px,0);background-color:#FFDEDE'></div>");
document.write("<div style='position:absolute;z-index:-1;left:50px;top:190px;width:780px;height:85px;clip:rect(0,780px,85px,0);background-color:#9CCFFF'></div>");
break;
case 5:
Title.innerHTML="Total Body Water ( % )";
break;
default:
Title.innerHTML=iType;
break;
}
//draw X Axis
for(var i=0;i<31;i++)
{
document.write("<div style='position:absolute;z-index:0;left:"+(ChartLeft+i*ChartWidth/30)+"px;top:50px;width:1px;height:350px;clip:rect(0,1px,350px,0);background-color:black'></div>");
if(i>0)
{
document.write("<div style='position:absolute;left:"+(ChartLeft+i*ChartWidth/30-ChartWidth/60)+"px;top:400px;width:25px;height:20px;z-index:1'>");
document.write(i);
document.write("</div>");
}
}
//draw Y Axis
for(var i=0;i<11;i++)
{
document.write("<div style='position:absolute;z-index:0;left:50px;top:"+(ChartTop+i*ChartHeight/10)+"px;width:780px;height:1px;clip:rect(0,780px,1px,0);background-color:black'></div>");
document.write("<div style='TEXT-ALIGN: right;position:absolute;left:0px;top:"+(ChartTop+i*ChartHeight/10)+"px;width:50px;height:35px;z-index:1'>");
document.write((fMax-i*(fMax-fMin)/10).toFixed(0));
document.write("</div>");
}
if(data)
{
for(var i=0;i<data.length;i++)
{
if(i<data.length-1)
{
//Curve
DrawLine((ChartLeft+i*ChartWidth/30+ChartWidth/60),(ChartTop+ChartHeight-(data[i]-fMin)*ChartHeight/(fMax-fMin)),(ChartLeft+(i+1)*ChartWidth/30+ChartWidth/60),(ChartTop+ChartHeight-(data[i+1]-fMin)*ChartHeight/(fMax-fMin)));
}
//Point
document.write("<div id='Point"+i+"' onmouseover='mMouseOver("+i+",this)' onmouseout='mMouseOut(this)' style='position:absolute;z-index:3;left:"+(ChartLeft+i*ChartWidth/30+ChartWidth/60-3)+"px;top:"+(ChartTop+ChartHeight-(data[i]-fMin)*ChartHeight/(fMax-fMin)-3)+"px;width:6px;height:6px;clip:rect(0,6px,6px,0);background-color:#FF0FFF'></div>");
}
if((data[0]>data[data.length-1])^(iType==5))
{
Msg.innerHTML="Weight Trend: Decreaing, Continue to keep it";
Msg.style.color='Blue';
}
else
{
Msg.innerHTML="Weight Trend: Increaing, You must make effort!";
Msg.style.color='Red';
}
}
-->
</script>
</body>
</HTML>