screenX / Y,clientX / Y和pageX / Y有什么区别?

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

screenX / Y,clientX / Y和pageX / Y有什么区别?

MOISTGMOISTG提问于
人生的旅途辣鸡前端回答于

这些之间的差异将主要取决于您目前所指的浏览器。每一个都不同地实现这些属性,或者根本不实现。Quirksmode拥有关于浏览器在DOM和JavaScript事件等W3C标准方面的差异。

御姐万岁回答于

在JavaScript中:

pageX,pageY,screenX,screenY,clientX和clientY返回一个数字,表示一个点离参考点的物理“css像素”的数量。事件点是用户点击的地方,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。

pageX和pageY:

相对于浏览器中完全渲染内容区域的左上角。该参考点位于左上方的url栏和后退按钮之下。这一点可以在浏览器窗口中的任何地方,并且如果嵌入页面中嵌入可滚动页面并且用户移动滚动条,则可以实际改变位置。

screenX和screenY:

相对于物理屏幕/显示器的左上角,只有在增加或减少显示器数量或显示器分辨率时,此参考点才会移动。

clientX和clientY:

相对于浏览器窗口的内容区域(视口)的左上角。即使用户从浏览器中移动滚动条,这一点也不会移动。

对于哪些浏览器支持哪些属性的视觉效果:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools有一个在线的Javascript解释器和编辑器,所以你可以看到每个做什么

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph, 
and an alert box will alert the x and y coordinates 
of the mouse pointer.</p>
</body>
</html>

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问9 回答
  • 四无君

    0 粉丝0 提问3 回答
  • 拉布拉多拉不多

    1 粉丝0 提问2 回答
  • 小书虫

    0 粉丝1 提问2 回答

扫码关注云+社区

领取腾讯云代金券