当前位置：首页 > JavaScript

js实现鼠标

2026-04-06 01:45:09JavaScript

鼠标事件监听

在JavaScript中，可以通过addEventListener为元素绑定鼠标事件。常见事件包括：

click：单击
dblclick：双击
mousedown：按下鼠标按钮
mouseup：释放鼠标按钮
mousemove：鼠标移动
mouseenter/mouseleave：鼠标进入/离开元素

document.getElementById('element').addEventListener('click', function(event) {
  console.log('Clicked at:', event.clientX, event.clientY);
});

鼠标坐标获取

通过事件对象event获取鼠标位置：

js实现鼠标

clientX/clientY：相对于视口的坐标
pageX/pageY：相对于文档的坐标
screenX/screenY：相对于屏幕的坐标

document.addEventListener('mousemove', function(event) {
  console.log('Viewport position:', event.clientX, event.clientY);
});

阻止默认行为

调用event.preventDefault()可阻止与事件关联的默认行为（如链接跳转）。

js实现鼠标

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

事件委托

通过事件冒泡机制，在父元素上监听子元素事件：

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    console.log('Child element clicked');
  }
});

鼠标拖拽实现

结合mousedown、mousemove和mouseup实现拖拽效果：

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

draggable.addEventListener('mousedown', function() {
  isDragging = true;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    draggable.style.left = event.clientX + 'px';
    draggable.style.top = event.clientY + 'px';
  }
});

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