参考资料

  1. HTML DOM 返回文档的完整的URL实例
  2. HTML DOM 哪个事件发生了？
  3. HTML DOM添加表格行中的单元格
  4. HTML DOM 修改 HTML 内容
  5. HTML DOM 返回和设置链接的href属性实例
  6. HTML DOM禁用和启用下拉列表
  7. HTML DOM 导航节点关系
  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：事件鼠标屏幕属性对象指针整个文档浏览器详细