参考资料

  1. HTML DOM 返回image的longdesc属性的值
  2. HTML DOM 获取第一个链接ID的实例
  3. HTML DOM 返回文档中第一个图像的ID
  4. HTML DOM获得有下拉列表的表单的ID
  5. HTML DOM 返回图像映射的某个区域的target的值 实例
  6. HTML DOM改变下拉列表中被选中的选项的文本
  7. HTML DOM document.write() 方法
  8. HTML DOM 返回页面上所有相对链接的基链接 实例

HTML DOM 鼠标的坐标？

HTML DOM 鼠标坐标

详细介绍

在HTML DOM中，可以通过事件对象获取鼠标指针的坐标位置。主要有以下几种坐标系统：

  • 屏幕坐标：相对于整个屏幕

  • 页面坐标：相对于整个文档

  • 客户端坐标：相对于浏览器视口

相关属性和方法

事件对象属性

  1. event.screenX / event.screenY - 相对于屏幕的坐标

  2. event.pageX / event.pageY - 相对于文档的坐标

  3. event.clientX / event.clientY - 相对于视口的坐标

  4. event.offsetX / event.offsetY - 相对于事件目标元素的坐标

用法示例

<!DOCTYPE html>
<html>
<head>
<style>
#coordinates {
  position: fixed;
  top: 10px;
  left: 10px;
  background: white;
  padding: 5px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="coordinates">鼠标坐标将显示在这里</div>

<script>
document.addEventListener('mousemove', function(event) {
  const coords = document.getElementById('coordinates');
  coords.innerHTML = `
    屏幕坐标: (${event.screenX}, ${event.screenY})<br>
    页面坐标: (${event.pageX}, ${event.pageY})<br>
    视口坐标: (${event.clientX}, ${event.clientY})
  `;
});
</script>
</body>
</html>

CSS扩展

可以通过CSS的cursor属性改变鼠标指针样式：

.element {
  /* 基本指针样式 */
  cursor: pointer; /* 手型 */
  cursor: move;    /* 移动 */
  cursor: text;    /* 文本输入 */
  cursor: wait;    /* 等待 */
  cursor: help;    /* 帮助 */
  cursor: not-allowed; /* 禁止 */
  
  /* 自定义指针 */
  cursor: url('custom.cur'), auto;
}

实际应用

  1. 拖拽功能实现

  2. 自定义右键菜单

  3. 绘图应用

  4. 游戏开发

  5. 交互式数据可视化

注意事项

  • 移动设备上的触摸事件需要使用touchstart, touchmove等事件

  • 考虑浏览器兼容性，特别是旧版IE

  • 高频率的mousemove事件可能影响性能，需要适当节流

TAG：事件鼠标屏幕属性对象指针整个文档浏览器详细