插件窝 干货文章 js如何获取鼠标

js如何获取鼠标

鼠标 strong event class 26    来源:    2024-10-18
获取鼠标信息的方法:事件监听器:捕获鼠标移动、点击和释放事件。clientx 和 clienty:获取鼠标相对于视口的位置。offsetx 和 offsety:获取鼠标相对于容器元素的位置。screenx 和 screeny:获取鼠标相对于整个屏幕的位置。鼠标按钮:获取按下哪些鼠标按钮。键盘修饰键:检查是否按下了键盘修饰键。

如何使用 JavaScript 获取鼠标

在 JavaScript 中,获取鼠标信息有以下几种方法:

1. 事件监听器

使用事件监听器是在鼠标移动、点击或释放时捕获鼠标信息的最常见方法。

document.addEventListener('mousemove', function(event) {
  // 获取鼠标相对于视口的位置
  var x = event.clientX;
  var y = event.clientY;
});

2. clientX 和 clientY

clientX 和 clientY 属性返回鼠标相对于视口的位置。

var x = event.clientX;
var y = event.clientY;

3. offsetX 和 offsetY

offsetX 和 offsetY 属性返回鼠标相对于其容器元素的位置。

var x = event.offsetX;
var y = event.offsetY;

4. screenX 和 screenY

screenX 和 screenY 属性返回鼠标相对于整个屏幕的位置。

var x = event.screenX;
var y = event.screenY;

5. 鼠标按钮

使用 buttons 属性可以获取按下哪些鼠标按钮。

var buttons = event.buttons;

6. 键盘修饰键

使用 ctrlKey、shiftKey 和 altKey 属性可以检查是否按下了相应键盘修饰键。

var ctrlKey = event.ctrlKey;
var shiftKey = event.shiftKey;
var altKey = event.altKey;
上一篇:js中如何渲染