`

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

    博客分类：
  • js
 
阅读更多

在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;


 

  • 大小: 99 KB
分享到：
| iframe相互取值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    event.X和event.clientX的区别分析

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

    event.x,event.clientX,event.offsetX区别

    clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] &lt;html&gt; &lt;...

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    NULL 博文链接：https://meizhi.iteye.com/blog/576133

    JavaScript中获取鼠标位置相关属性总结

    javascript并没有mouse对象，获取鼠标...event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event.x event.y 共计6组！ 而且他们的区别并不明显，各浏览器间

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。

    让你的图片实现可以拖动的效果

    z.style.pixelTop=temp2+event.clientY-y return false }} function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft...

    Javascript下IE与Firefox下的差异兼容写法总结

    window.event对象差异 ... 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：styl

    整理的比较全的event对像在ie与firefox浏览器中的区别

    通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL

    js 调色板 纯js

    var top = document.body.scrollTop + event.clientY; if (event.clientX+clrPanel.style.pixelWidth &gt; document.body.clientWidth) { //对话框显示在鼠标右方时，会出现遮挡，将其显示在鼠标左方 left -= ...

    JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听...if(event.clientX&gt;document.body.clientWidth&&event.clientY&lt;0||event.altKey) { return "您要离开吗？"; } } [removed] 方式二：适用于IE和FF，不区分刷新和关闭

    比较全面的event对像在IE与FF中的区别 推荐

    通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL

    JavaScript取得鼠标绝对位置程序代码介绍

    event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离) 4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能...

    Event对象详解

    altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

    IE和FF在对js支持的不同(整理)及解决方法

    2. 鼠标当前坐标 IE：event.x和event.y FF：event.pageX和event.pageY 解决办法：采用通用属性：event.clientX和event.clientY属性; 3. 鼠标坐标加上滚动条滚过的距离 IE：event.offsetX和event.offsetY FF：event

    IE与FireFox的兼容性问题分析

     通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：sty

    当前鼠标的光标坐标是多少

    y=event.clientY alert&#40;"X 坐标： " + x + ", Y 坐标： " + y&#41; } [removed] &lt;/head&gt; &lt;body &lt;p&gt;在此文档中按下你鼠标的左键看看！&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

    js获取鼠标点击的位置实现思路及代码

    copy来的，但是原页面的代码还是需要修改，下面是修改可用的 常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为event.clientX和event.clientY获取的鼠标位置是相...

    移动div层.txt

    document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor return false } } function mouseup() { mouseover=false } document.onmousedown=coordinates document....

    JS大全 web编程

    event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement....

Magicbox
Global site tag (gtag.js) - Google Analytics