参考资料

  1. HTML DOM 获取第一个链接ID的实例
  2. HTML DOM 改变链接的target属性实例
  3. HTML DOM 返回文档的完整的URL实例
  4. HTML DOM 根节点childNodes 和 nodeValue
  5. HTML DOM 返回图像映射某个区域的替代文字实例
  6. HTML DOM 返回文档中第一个锚的 innerHTML
  7. HTML DOM 属性
  8. HTML DOM 对iframe排版

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：事件鼠标屏幕属性对象指针整个文档浏览器详细