JavaScript 鼠标事件

JavaScript 提供了多种鼠标事件，允许开发者响应用户与页面的交互。以下是主要的鼠标事件及其用法：

基本鼠标事件

1. click - 单击鼠标按钮（通常是左键）

   element.addEventListener('click', function(event) {
     console.log('元素被点击了');
   });
   

2. dblclick - 双击鼠标按钮

   element.addEventListener('dblclick', function(event) {
     console.log('元素被双击了');
   });
   

3. mousedown - 鼠标按钮被按下

   element.addEventListener('mousedown', function(event) {
     console.log('鼠标按钮被按下', event.button); // 0-左键, 1-中键, 2-右键
   });
   

4. mouseup - 鼠标按钮被释放

   element.addEventListener('mouseup', function(event) {
     console.log('鼠标按钮被释放');
   });
   

5. mousemove - 鼠标在元素上移动

   element.addEventListener('mousemove', function(event) {
     console.log(`鼠标位置: X=${event.clientX}, Y=${event.clientY}`);
   });
   

6. mouseover - 鼠标移入元素

   element.addEventListener('mouseover', function(event) {
     console.log('鼠标移入元素');
   });
   

7. mouseout - 鼠标移出元素

   element.addEventListener('mouseout', function(event) {
     console.log('鼠标移出元素');
   });
   

8. mouseenter - 鼠标进入元素（不冒泡）

   element.addEventListener('mouseenter', function(event) {
     console.log('鼠标进入元素');
   });
   

9. mouseleave - 鼠标离开元素（不冒泡）

   element.addEventListener('mouseleave', function(event) {
     console.log('鼠标离开元素');
   });
   

10. contextmenu - 右键点击（上下文菜单）

    element.addEventListener('contextmenu', function(event) {
      event.preventDefault(); // 阻止默认上下文菜单
      console.log('右键点击');
    });
    

鼠标事件对象属性

鼠标事件回调函数接收的 event 对象包含许多有用的属性：

• clientX, clientY - 相对于视口的坐标
• pageX, pageY - 相对于文档的坐标
• screenX, screenY - 相对于屏幕的坐标
• button - 被点击的按钮编号（0=左键, 1=中键, 2=右键）
• buttons - 所有被按下的按钮（位掩码）
• altKey, ctrlKey, shiftKey, metaKey - 是否按下了修饰键
• relatedTarget - 对于 mouseover/mouseout，表示来自/去的元素
• target - 事件触发的目标元素

示例：拖拽实现

const draggable = document.getElementById('draggable');

draggable.addEventListener('mousedown', function(e) {
  e.preventDefault();
  
  let shiftX = e.clientX - draggable.getBoundingClientRect().left;
  let shiftY = e.clientY - draggable.getBoundingClientRect().top;

  function moveAt(pageX, pageY) {
    draggable.style.left = pageX - shiftX + 'px';
    draggable.style.top = pageY - shiftY + 'px';
  }

  function onMouseMove(e) {
    moveAt(e.pageX, e.pageY);
  }

  document.addEventListener('mousemove', onMouseMove);

  draggable.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMouseMove);
    draggable.removeEventListener('mouseup', onMouseUp);
  });
  
  // 防止拖动时选中文本
  draggable.ondragstart = function() {
    return false;
  };
});

注意事项

1. mouseover/mouseout 会冒泡，当鼠标进入/离开子元素时也会触发
2. mouseenter/mouseleave 不会冒泡，只在鼠标进入/离开元素本身时触发
3. 移动设备上的触摸事件与鼠标事件有所不同，可能需要额外处理
4. 频繁触发的事件（如 mousemove）应该进行节流(throttle)或防抖(debounce)处理

这些鼠标事件为创建丰富的交互式网页提供了基础功能。