参考资料

  1. HTML DOM 返回文档中表单数目
  2. HTML DOM 打开输出流，向流中输入文本实例
  3. HTML DOM 返回文档的完整的URL实例
  4. HTML DOM 返回和设置链接的charset属性实例
  5. HTML DOM write() 和 writeln()的不同实例
  6. HTML DOM对单个单元格的内容水平对齐
  7. HTML DOM 给image加上border
  8. 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：事件鼠标屏幕属性对象指针整个文档浏览器详细

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。