夏日博客

A-A+

event.x、event.clientX、event.offsetX、event.screenX 详解

2016年01月27日 前端设计 暂无评论 阅读 4 views 次

event.x、event.clientX、event.offsetX、event.screenX 详解 有需要的朋友可参考一下

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

实例,同时你可以对比下面代码分析,代码如下:

  1. <table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">  
  2. <tr><td>  
  3. <div onclick="show()" style="background:silver;cursor:hand">  
  4. Click here to show.   
  5. </div>  
  6. </td></tr>  
  7. </table>  
  8. <script>  
  9. function show(){  
  10. alert("window.event.x:"+window.event.x+"nwindow.event.y:"+window.event.y+"nevent.clientX:"+event.clientX+"nevent.clientY:"+event.clientY+"nevent.offsetX:"+event.offsetX+"nevent.offsetY:"+event.offsetY+"nwindow.event.screenX:"+window.event.screenX+"nwindow.event.screenY:"+window.event.screenY);  
  11. }  
  12. </script>  

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标.

event.x与event.y问题 firefox和IE下差异.

说明:

IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.

解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

标签：

给我留言