JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JavaScript获取鼠标坐标

鼠标坐标包括 x 坐标、y 坐标、相对于客户端的坐标、相对于屏幕的坐标等。

在JavaScript中,鼠标坐标是作为event对象的属性存在的。

event 对象中有关鼠标坐标的属性如下所示。
W3C 规范所规定的的属性
属性 描述
clientX 鼠标指针相对客户端(即浏览器文档区域)的水平坐标。
clientY 鼠标指针相对客户端(即浏览器文档区域)的垂直坐标。
screenX 鼠标指针相对计算机屏幕的水平坐标。
screenY 鼠标指针相对计算机屏幕的垂直坐标。
IE 浏览器特有属性
属性 描述
offsetX 发生事件的地点在事件源元素的坐标系统中的水平坐标。
offsetY 发生事件的地点在事件源元素的坐标系统中的垂直坐标。
x 事件发生的位置的水平坐标,它们相对于用CSS动态定位的最内层包容元素。
y 事件发生的位置的垂直坐标,它们相对于用CSS动态定位的最内层包容元素。

【例6-1】获取鼠标的坐标信息。
<html>
<head>
<title>获取鼠标的坐标信息</title>
</head>
<body>
<div id="demo">点击这里</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(e){
    var eve = e || window.event;
    var x = eve.clientX,  // 相对于客户端的X坐标
        y = eve.clientY,  // 相对于客户端的Y坐标
        x1 = eve.screenX,  // 相对于计算机屏幕的X坐标
        y1 = eve.screenY;  // 相对于计算机屏幕的Y坐标
        
    alert(
        "相对客户端的坐标:\n"+
        "x = "+x+"\n"+
        "y = "+y+"\n\n"+
        "相对屏幕的坐标:\n"+
        "x = "+x1+"\n"+
        "y = "+y1
    );
}
</script>
</body>
</html>

请看下面的演示:
点击这里