📌  相关文章
📜  HTML | DOM onmousemove 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.417000             🧑  作者: Mango

HTML | DOM onmousemove 事件

简介

在 HTML 中，onmousemove 事件是与鼠标移动相关的 DOM 事件之一。它在鼠标指针在某个元素上移动时触发，可以用来捕获鼠标的位置信息。

语法
<object onmousemove="function()">
<audio onmousemove="function()">
<canvas onmousemove="function()">
<embed onmousemove="function()">
<form onmousemove="function()">
<img onmousemove="function()">
<input onmousemove="function()">
<select onmousemove="function()">
<textarea onmousemove="function()">

其中，onmousemove 为事件属性，function() 为事件触发时执行的 JavaScript 函数。

示例
<!DOCTYPE html>
<html>
<body>

<h2>onmousemove 事件示例</h2>
<p>鼠标移动到下方区域，该区域的背景色将随鼠标位置改变。</p>

<div id="myDiv" onmousemove="changeColor(event)"></div>

<script>
function changeColor(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "鼠标当前位置：(" + x + "," + y + ")";
  document.getElementById("myDiv").style.backgroundColor = "rgb(" + x/2 + "," + y/2 + ",100)";
  document.getElementById("myDiv").innerHTML = coor;
}
</script>

</body>
</html>

上述示例中，onmousemove 事件绑定到 myDiv 元素，当鼠标在 myDiv 元素上移动时，将触发 changeColor 函数。函数通过 event.clientX 和 event.clientY 获取鼠标的位置，并根据鼠标位置改变 myDiv 元素的背景色。

事件属性

以下是 onmousemove 事件的属性：

  • clientX：鼠标指针相对于窗口文档区的水平坐标。
  • clientY：鼠标指针相对于窗口文档区的垂直坐标。
  • screenX：鼠标指针相对于屏幕的水平坐标。
  • screenY：鼠标指针相对于屏幕的垂直坐标。
  • shiftKey：鼠标事件触发时，是否按下 Shift 键。
  • altKey：鼠标事件触发时，是否按下 Alt 键。
  • ctrlKey：鼠标事件触发时，是否按下 Ctrl 键。
  • buttons：鼠标事件触发时，按下的鼠标按钮的状态。
总结

通过使用 onmousemove 事件，程序员可以轻松地捕获鼠标在指定元素上的移动，并做出相应的响应。无论是改变元素的样式、移动元素或执行其他操作，onmousemove 事件都为开发者提供了便利的方法来处理与鼠标移动相关的交互。在具体使用时，可以利用 event 对象的属性来获得鼠标的坐标位置以及其他相关信息。