javascript onmousemove事件使用教程-编程学习网

这篇文章将为大家详细讲解有关javascript onmousemove事件使用教程，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

JavaScript onmousemove事件教程

简介

onmousemove事件在鼠标在元素上移动时触发。它通常用于动态更新元素样式、移动元素或显示 tooltip。

语法

element.onmousemove = function(event) {
  // 事件处理程序代码
};

其中：

element 是要监听事件的元素。
function(event) 是一个事件处理程序函数，它将在鼠标在元素上移动时执行。
event 是包含事件详细信息的对象。

事件对象属性

event 对象包含有关鼠标移动的以下信息：

clientX：鼠标指针相对于文档窗口左上角的水平坐标。
clientY：鼠标指针相对于文档窗口左上角的垂直坐标。
offsetX：鼠标指针相对于触发元素左上角的水平坐标。
offsetY：鼠标指针相对于触发元素左上角的垂直坐标。
screenX：鼠标指针相对于屏幕左上角的水平坐标。
screenY：鼠标指针相对于屏幕左上角的垂直坐标。
button：指示按下的鼠标按钮（左键为 0，中键为 1，右键为 2）。
buttons：指示按下的鼠标按钮的位掩码。
altKey：指示是否按下了 Alt 键。
ctrlKey：指示是否按下了 Ctrl 键。
shiftKey：指示是否按下了 Shift 键。
metaKey：指示是否按下了 Meta 键（在 macOS 上为 Command 键）。

用法

onmousemove事件通常用于以下目的：

更新元素样式：改变鼠标悬停时元素的颜色、边框或背景。
移动元素：拖拽元素到新位置。
显示 tooltip：当鼠标悬停在元素上时显示一个包含附加信息的工具提示。
播放动画：响应鼠标移动创建动画效果。

示例

1. 更新元素样式：

document.getElementById("element").onmousemove = function(event) {
  element.style.color = "red";
};

2. 移动元素：

document.getElementById("element").onmousemove = function(event) {
  element.style.left = event.clientX + "px";
  element.style.top = event.clientY + "px";
};

3. 显示 tooltip：

document.getElementById("element").onmousemove = function(event) {
  // 创建一个 tooltip 元素
  var tooltip = document.createElement("div");
  tooltip.textContent = "这是提示信息";

  // 设置 tooltip 的样式
  tooltip.style.position = "absolute";
  tooltip.style.left = event.clientX + "px";
  tooltip.style.top = event.clientY + "px";

  // 将 tooltip 添加到页面
  document.body.appendChild(tooltip);
};

注意事项