js获取鼠标位置(兼容 Firefox 3.6, Opera 10.10, Chrome 4.1)
<script language="网页特效">
function document.onmouseo教程ver()
{
document.all("txtbox").value=event.screenX+"x"+event.screenY;
}
private void Button1_Click(object sender, System.EventArgs e)
{
this.TextBox1.Text=txtbox.Value;
}
完整实例
**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev) {
// 定义鼠标在视窗中的位置
var point = {
x:0,
y:0
};
// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
if(typeof window.pageYOffset != 'undefined') {
point.x = window.pageXOffset;
point.y = window.pageYOffset;
}
// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
point.x = document.documentElement.scrollLeft;
point.y = document.documentElement.scrollTop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if(typeof document.body != 'undefined') {
point.x = document.body.scrollLeft;
point.y = document.body.scrollTop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientX;
point.y += ev.clientY;
// 返回鼠标在视窗中的位置
return point;
}
IE 以外的浏览器 (本人测试过 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离. 但 IE (本人测试过 IE6, IE7, IE8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.
再看个应用实例html+js
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var domType = '';
if (document.all) {
domType = "ie4";
} else if (document.getElementById) {
domType = "std";
} else if (document.layers) {
domType = "ns4";
}
function initMouseMove(){
if(!document.all){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mouseMove;
}
function mouseMove(e){
var x,y;
if(!document.all){
fetch_object("txt").value="move";
x=e.pageX;
y=e.pageY;
}else{
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}
fetch_object("txt").value=x+":"+y;
}
var objects=new Array();
function fetch_object(idname, forcefetch) {
if (forcefetch || typeof(objects[idname]) == "undefined") {
switch (domType) {
case "std": {
objects[idname] = document.getElementById(idname);
}
break;
case "ie4": {
objects[idname] = document.all[idname];
}
break;
case "ns4": {
objects[idname] = document.layers[idname];
}
break;
}
}
return objects[idname];
}
-->
</script>
<title>get mouse position</title>
</head>
<body onload="initMouseMove()">
<input id="txt"/>
</body>
</html>
-------------------------------------------------------------------------------------------------
总的来说：
x=document.body.scrollLeft+event.clientX; //获取当前鼠标位置的X坐标
y=document.body.scrollTop+event.clientY; //获取当前鼠标位置的Y坐标