JavaScript HTML DOM pageX 鼠标事件属性

• 

  pageX 鼠标事件属性

  当触发鼠标事件时，pageX属性返回鼠标指针的水平坐标（根据文档）。该文档是网页。

  提示：要获取鼠标指针的垂直坐标（根据文档），请使用pageY属性。

  注意：此属性是只读的。

  注意：此属性是非标准的，但适用于大多数主流浏览器。

  单击元素上的鼠标按钮时输出鼠标指针的坐标：

  var x = event.pageX;     // 获取水平坐标
  var y = event.pageY;          // 获取垂直坐标
  var coor = "X coords: " + x + ", Y coords: " + y;
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  pageX	12.0+	支持	支持	支持	支持

• 

  语法

  event.pageX
• 

  技术细节

  项目	描述
  返回值：	一个数字，表示鼠标指针的水平坐标，以像素为单位

• 

  更多例子

  当鼠标指针在元素上移动时输出鼠标指针的坐标：

  var x = event.pageX;
  var y = event.pageY; 
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
  

  尝试一下

  演示了pageX和pageY以及screenX和screenY之间的区别：

  var pX = event.screenX;
  var cX = event.pageX;
  var pY = event.screenY;
  var cY = event.pageY;
  var coords1 = "page - X: " + pX + ", Y coords: " + pY;
  var coords2 = "screen - X: " + cX + ", Y coords: " + cY;
  

  尝试一下
• 

  相关页面

  HTML DOM参考：MouseEvent clientX属性

  HTML DOM参考：MouseEvent clientY属性