鼠标位置的获取clientX、pageX、offsetX，screenX的使用

<! 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 >