event.clientX、clientY、x、y、offsetX、offsetY、screenX、区别

在Javascript中,坐标的获取让人头晕,下面这段代码较好地演示了上述各个参数的含义:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 坐标位置</TITLE>
<style>
*{
margin:0}
#d1{
position:absolute;
left:50px;
top:50px;
border:1px blue solid;
}

</style>
</HEAD>

<SCRIPT>  
function   dullwolf()   {
if (!document.all)
      var evt=arguments[0];
else
      var evt=event;
p1.innerText=window.event.x;  
p2.innerText=window.event.y;  
p3.innerText=window.event.clientX;  
p4.innerText=window.event.clientY;  
p5.innerText=window.event.offsetX;  
p6.innerText=window.event.offsetY;  
p7.innerText=window.event.screenX;  
p8.innerText=window.event.screenY;  
}  
     
</SCRIPT>    
<body onmousemove="dullwolf();">  
<div id="d1">
event.x=<span   id="p1">   </span>;  
event.y=<span   id="p2">   </span>;  
clientX=<span   id="p3">   </span> ;
clientY=<span   id="p4">   </span> ; <br>
offsetX=<span   id="p5">   </span> ;
offsetY=<span   id="p6">   </span> ;
screenX=<span   id="p7">   </span> ;
screenY=<span   id="p8">   </span>;
<p>test</p>
    <p>test</p>
   <p>test</p>
     <p>test</p>
    <p>test</p>
      <p>test</p>
     <p>test</p>
       <p>test</p>
      <p>test</p>
    <p>test</p>
   <p>test</p>
     <p>test</p>
    <p>test</p>
      <p>test</p>
     <p>test</p>
       <p>test</p>
      <p>test</p>
     </div>
</body>

</HTML>

 

 

clientX与clientY、x与y:鼠标相对于浏览器内容窗口左上角的偏移量。

offsetX与offsetY:在蓝色框内,鼠标相对于蓝色框左上角的偏移量。若移出蓝色框,则是与上面的值接近的数据。(?为什么不是相等?少了2px)。

screenX与screenY:鼠标相对于显示器左上角的偏移量,也许屏幕上同时打开的有其它的应用程序。 

但是x与clientX有何区别?还不清楚。

scrollLeft:当网页宽度超出屏幕宽度,并向右滚动了部分网页时,该值表示网页左边被卷去的宽度。

scrollTop:同上,网页上部被卷去的高度。

所以,若网页有被滚动(有滚动条且进行了滚动),则此时鼠标的坐标应为:

x=event.clientX+document.body.scrollLeft;

y=event.clientY+document.body.scrollTop;


 

你可能感兴趣的:(client)