e.clientX,e.clientY返回事件发生时鼠标指针相对于浏览器窗口可见区域的水平(垂直)窗口坐标。可见区域不包括工具栏和滚动条。IE事件和标准事件都定义了e.pageX和e.pageY这两个属性来返回鼠标指针的位置,类似于event.clientX和event.clientY,但它们使用的是Document坐标,而不是窗口坐标。这2个属性不是标准的,但得到广泛支持。IE事件没有这两个属性e.offsetXe.offsetY返回鼠标指针相对于事件源元素的水平(垂直坐标)的位置,只有IE有这两个属性,标准事件没有对应的属性e.screenXe.screenY返回事件发生时鼠标指针相对于用户显示屏幕左上角的水平(垂直)坐标。);box.onclick=function(e){console.log('e.clientX,e.clientY:'+e.clientX,e.clientY);console.log('e.offsetX,e.offsetY:'+e.offsetX,e.offsetY);console.log('e.pageX,e.pageY:'+e.pageX,e.pageY);console.log('e.screenX,e.screenY:'+e.screenX,e.screenY);console.log('e.layerX,e.layerY:'+e.layerX,e.layerY);}}2。不同的浏览器支持这些属性:3、图形event.offsetX、event.clientX、event.pageX、event.screenX属性四、图形event.layerX、event.layerY属性五、图形event.layerX、event.layerY属性六:详解文字描述chrome:e.pageX-相对于整个页面的坐标e.layerX-从边框左上角开始的坐标相对于当前坐标系e.offsetX-从边框左上角开始的坐标相对于当前坐标系e.clientX-相对于可见区域的坐标e.x-相对可见的视口坐标ff:(firefox)e。pageX——相对于整个页面的坐标e.layerX——从边框左上角开始的相对于当前坐标系的坐标e.offsetX——noe.clientX——相对于可见区域的坐标e.x——noopera:e.pageX——相对于整个页面的坐标e.layerX——无e.offsetX——从内容区左上角开始的相对于当前坐标系的坐标e.clientX——相对于可见区域的坐标e.x——--相对于可见区域safari的坐标:(这个和chrome一样)e.pageX-相对于整个页面的坐标e.layerX-从边框左上角开始的相对于当前坐标系的坐标e.offsetX-从边框的左上角开始相对于当前坐标系坐标e.clientX—相对于可视区域的坐标e.x—相对于可视区域的坐标IE9:e.pageX—相对于整个页面的坐标e.layerX-C从边框的左上角开始的坐标相对于当前坐标系+滚动条滚动的距离(这个NB很隆重...==)e.offsetX-从内容区域左上角开始相对于当前坐标系的坐标e.clientX-相对于可见区域的坐标e.x-从边框左上角开始相对于当前坐标系坐标系IE8:e.pageX-Nonee.layerX——无e.offsetX——从内容区左上角开始相对于当前坐标系的坐标e.clientX——相对于可见区域的坐标e.x———从边框的左上角开始相对于当前坐标系IE7:e.pageX——无e.layerX——无e.offsetX——相对于当前坐标系从内容区左上角开始的坐标e.clientX——相对于可见区域的坐标e.x——从左上角开始边框左上角相对于当前坐标系IE6:e.pageX-无e.layerX-无e.offsetX-相对于当前坐标系e内容区域左上角开始的坐标。clientX-相对于可见区域的坐标e.x-相对于当前坐标系边框从左上角开始,所以考虑兼容性时必须这样写,functiongetEventPosition(ev){varx,y;如果(ev.layerX||ev.layerX==0){x=ev.layerX;y=EV。Y层;}elseif(ev.offsetX||ev.offsetX==0){//Operax=ev.offsetX;y=ev.offsetY;}返回{x:x,y:y};}PageX和clientXpageX指的是鼠标在页面上的位置,以页面的左侧为参考点clientX指的是在可见区域中距左侧的距离,以滚动条滚动到的位置为参考点。所有浏览器都一样。即有滚动条时,clientX小于pageXscreenX,鼠标在屏幕上的位置是指鼠标到电脑屏幕左侧的距离。所有浏览器都一样。与clientX的区别在于clientX是到浏览器的距离。例如:网页缩小拖拽到屏幕中间时,为了兼容浏览器,screnX大于clientXoffsetX和layerX,layerX为FF和chrome识别,offsetX为非FF。如果触发元素设置位置,则offsetX等于layerX。如果页面有滚动条,则添加滚动距离。layerX:FF独有,相对于父元素的位置,鼠标相对于触发事件的元素的层级关系中离该元素最近的父元素边界的位置,以及position设置,从border的左上角开始,即如果父元素有border,则坐标原点为border的左上角,而不是内容区域的左上角。offsetX:IE特有的,鼠标相对于“触发事件的元素”的位置是从内容区域的左上角定位的,而不是从边框的左上角定位的!这个属性比较好用。非常方便判断鼠标点在元素中的位置。FF没有直接替换属性。点击li,如果在UL中设置了position,layerX会相对于UL,如果没有,会向上冒泡到parent中去寻找设置了position的元素,直到根节点body。offsetX相对于被单击的LI元素。e.xFF不识别可见区域的距离,有无滚动条都一样,和clientXopera一样,chrome和safari的event.x返回值和event.clientX一样IE8910event.x返回值一样作为event.clientXie7e.x比e.clientX少2px
