JavaScript HTML DOM clientX 鼠标事件属性

• 

  clientX 鼠标事件属性

  当触发鼠标事件时，clientX属性返回鼠标指针的水平坐标（根据客户区域）。客户区是当前窗口。

  提示：要获取鼠标指针的垂直坐标（根据客户区域），请使用clientY属性。

  注意：此属性是只读的。

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

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

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  clientX	支持	支持	支持	支持	支持

• 

  语法

  event.clientX
• 

  技术细节

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

• 

  更多例子

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

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

  尝试一下

  演示了clientX和clientY以及screenX和screenY之间的区别：

  var cX = event.clientX;
  var sX = event.screenX;
  var cY = event.clientY;
  var sY = event.screenY;
  var coords1 = "client - X: " + cX + ", Y coords: " + cY;
  var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
  

  尝试一下
• 

  相关页面

  HTML DOM参考：MouseEvent clientY属性

  HTML DOM参考：MouseEvent screenX属性

  HTML DOM参考：MouseEvent screenY属性