JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera)，测试通过
直接复制成html文件，即可运行。
为方便大家测试特准备了一份在线演示
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera)_毛票票</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<styletype="text/css">
.tip{
width:200px;
border:2pxsolid#ddd;
padding:8px;
background:#f1f1f1;
color:#666;
}
</style>
<scripttype="text/javascript">
//方法1
functionmousePos(e){
varx,y;
vare=e||window.event;
return{
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
};
//方法2
//Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了,
//在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，
//而在IE下可以通过document.documentElement.scrollLeft，document.documentElement.scrollTop
functiongetMousePos(event){
vare=event||window.event;
varscrollX=document.documentElement.scrollLeft||document.body.scrollLeft;
varscrollY=document.documentElement.scrollTop||document.body.scrollTop;
varx=e.pageX||e.clientX+scrollX;
vary=e.pageY||e.clientY+scrollY;
//alert('x:'+x+'\ny:'+y);
return{'x':x,'y':y};
}
functiontest(e){
document.getElementById("mjs").innerHTML=getMousePos(e).x+','+getMousePos(e).y;
};
</script>
</head>
<body>
<divid="mjs"class="tip">获取鼠标点击位置坐标</div>
<divid="test"style="width:1000px;height:1000px;background:#ccc;"onmousemove="test(event)"></div>
</body>
</html>