如何为HTML img元素绑定统一函数处理指定鼠标事件？

1. 为img元素绑定统一事件处理函数 #

直接将所有需要监听的鼠标事件属性指向你定义的taskBarManipulation函数即可，无需额外匿名函数包裹：

<img 
  src={taskbarImage}
  onMouseEnter={taskBarManipulation}
  onMouseLeave={taskBarManipulation}
  onMouseUp={taskBarManipulation}
  onMouseDownCapture={taskBarManipulation}
  className="taskbar-application-img"
/>

2. 修复处理函数的逻辑错误 #

你的原taskBarManipulation函数存在两个关键问题：

• switch语句未加break：会导致事件类型匹配后，继续执行后续case的逻辑，引发错误
• 事件对应逻辑与原手动绑定不一致：比如mouseleave和mouseup的图片设置和你最初的代码不符

修正后的处理函数如下：

const taskBarManipulation = (e) => {
  switch (e.type) {
    case "mouseenter":
      setTaskbarImage(taskbarAppImageHover);
      break; // 终止当前case，避免逻辑穿透
    case "mouseleave":
      setTaskbarImage(taskbarAppImage); // 和原手动绑定逻辑一致
      break;
    case "mouseup":
      setTaskbarImage(taskbarAppImageHover); // 和原手动绑定逻辑一致
      break;
    case "mousedowncapture":
      setTaskbarImage(taskbarAppImageFocus);
      break;
    default:
      // 可选：处理未定义的事件类型
      break;
  }
};

3. （可选）封装可复用组件优化多img场景 #

因为你有多个同类img元素，建议封装成独立组件，彻底消除冗余代码：

import { useState } from 'react';

const TaskbarAppImg = ({ 
  defaultImg, 
  hoverImg, 
  focusImg, 
  className = "taskbar-application-img" 
}) => {
  const [currentImg, setCurrentImg] = useState(defaultImg);

  const handleEvent = (e) => {
    switch (e.type) {
      // 合并逻辑相同的事件，简化代码
      case "mouseenter":
      case "mouseup":
        setCurrentImg(hoverImg);
        break;
      case "mouseleave":
        setCurrentImg(defaultImg);
        break;
      case "mousedowncapture":
        setCurrentImg(focusImg);
        break;
      default:
        break;
    }
  };

  return (
    <img
      src={currentImg}
      onMouseEnter={handleEvent}
      onMouseLeave={handleEvent}
      onMouseUp={handleEvent}
      onMouseDownCapture={handleEvent}
      className={className}
    />
  );
};

// 组件使用示例
<TaskbarAppImg
  defaultImg={taskbarAppImage}
  hoverImg={taskbarAppImageHover}
  focusImg={taskbarAppImageFocus}
/>

内容的提问来源于stack exchange，提问作者JSJB