<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
title
>
鼠标位置的获取
</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
script
src
=
"js/jquery.js"
>
<
/
script
>
<
style
>
.first-div
{
width
:
400px
;
height
:
400px
;
border
:
1px
solid
gray
;
margin
:
20px
20px
;
}
<
/
style
>
</
head
>
<
body
>
<
div
class
=
"first-div"
></
div
>
<
script
>
$
(
document
).
ready
(
function
() {
$
(
".first-div"
).
click
(
function
(
e
) {
// clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
// 客户区指的是当前窗口。
var
dClientX
=
e
.
clientX
;
var
dClientY
=
e
.
clientY
;
//发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
var
dOffsetX
=
e
.
offsetX
;
var
dOffsetY
=
e
.
offsetY
;
//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
var
dPageX
=
e
.
pageX
;
var
dPageY
=
e
.
pageY
;
// screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标
var
dScreenX
=
e
.
screenX
;
var
dScreenY
=
e
.
screenY
;
});
});
<
/
script
>
</
body
>
</
html
>