当前位置：首页 > JavaScript

js实现鼠标

2026-03-14 07:40:58JavaScript

鼠标事件监听

在JavaScript中，可以通过addEventListener方法监听鼠标事件。常见的事件包括click、mousedown、mouseup、mousemove等。

document.addEventListener('click', function(event) {
    console.log('鼠标点击位置:', event.clientX, event.clientY);
});

鼠标位置获取

通过事件对象的clientX和clientY属性可以获取鼠标相对于视口的坐标。如果需要相对于文档的坐标，可以使用pageX和pageY。

document.addEventListener('mousemove', function(event) {
    console.log('当前鼠标位置:', event.pageX, event.pageY);
});

鼠标悬停效果

使用mouseover和mouseout事件可以实现悬停效果。结合CSS的:hover伪类，可以增强交互体验。

const element = document.getElementById('hover-element');
element.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'yellow';
});
element.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
});

拖拽功能实现

拖拽功能通常需要结合mousedown、mousemove和mouseup事件。通过记录初始位置和计算偏移量，实现元素的拖拽移动。

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', function(e) {
    isDragging = true;
    offsetX = e.clientX - this.getBoundingClientRect().left;
    offsetY = e.clientY - this.getBoundingClientRect().top;
});

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    draggable.style.left = (e.clientX - offsetX) + 'px';
    draggable.style.top = (e.clientY - offsetY) + 'px';
});

document.addEventListener('mouseup', function() {
    isDragging = false;
});

鼠标右键菜单

通过监听contextmenu事件并阻止默认行为，可以自定义右键菜单。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    const menu = document.getElementById('custom-menu');
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
    menu.style.display = 'block';
});

document.addEventListener('click', function() {
    document.getElementById('custom-menu').style.display = 'none';
});

鼠标滚轮事件

使用wheel事件可以监听鼠标滚轮的滚动方向，实现页面缩放或滚动控制。

js实现鼠标

document.addEventListener('wheel', function(e) {
    if (e.deltaY < 0) {
        console.log('向上滚动');
    } else {
        console.log('向下滚动');
    }
});