js实现鼠标

鼠标事件监听

在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.clientX, event.clientY);
  console.log('页面坐标:', event.pageX, event.pageY);
});

自定义鼠标样式

使用CSS的cursor属性可修改鼠标指针样式。JavaScript动态修改示例：

document.body.style.cursor = 'pointer'; // 更改为手型图标

鼠标拖拽实现

实现元素拖拽需要组合mousedown、mousemove和mouseup事件。示例代码片段：

let isDragging = false;
element.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (event) => {
  if (isDragging) {
    element.style.left = event.clientX + 'px';
    element.style.top = event.clientY + 'px';
  }
});

鼠标滚轮事件

通过wheel事件监听滚轮动作，deltaY属性判断滚动方向：

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