表单输入元素图片映射：hover与onclick事件背景切换冲突问题咨询

这个问题我之前做类似交互时也碰到过——本质是你的hover事件没有区分「点击激活」和「未激活」的状态，导致点击切换背景后，鼠标移开时hover的mouseout逻辑又把背景改回原样了。下面给你两种实用的解决方案：

方案1：用状态变量跟踪激活状态 #

这种方式适合用内联事件的场景，逻辑清晰易懂：

首先定义一个变量记录当前激活的区域，然后在hover的移入/移出函数里判断状态，只有未激活时才执行背景切换；点击事件里更新激活状态并切换对应背景：

// 记录当前被点击激活的区域，初始为null
let activeArea = null;

// hover移入时的逻辑
function hoverIn(area) {
  // 只有当前区域未激活时，才切换hover背景
  if (activeArea !== area) {
    document.getElementById('targetImage').src = `hover-${area.id}.jpg`;
  }
}

// hover移出时的逻辑
function hoverOut(area) {
  // 只有当前区域未激活时，才恢复原始背景
  if (activeArea !== area) {
    document.getElementById('targetImage').src = 'original.jpg';
  }
}

// 点击切换激活状态的逻辑
function toggleActive(area) {
  if (activeArea === area) {
    // 再次点击已激活的区域，取消激活并恢复原始背景
    activeArea = null;
    document.getElementById('targetImage').src = 'original.jpg';
  } else {
    // 激活当前区域，切换到点击后的背景
    activeArea = area;
    document.getElementById('targetImage').src = `active-${area.id}.jpg`;
  }
}

对应的HTML内联事件写法：

<img src="original.jpg" usemap="#imageMap" id="targetImage">
<map name="imageMap">
  <area shape="rect" coords="0,0,100,100" id="area1" onclick="toggleActive(this)" onmouseover="hoverIn(this)" onmouseout="hoverOut(this)">
  <!-- 其他区域同理 -->
</map>

方案2：用CSS类标记激活状态（推荐） #

如果更倾向于现代事件监听的写法，推荐用CSS类来标记激活状态，避免全局变量，代码更模块化：

// 获取所有图片映射区域和目标图片
const areas = document.querySelectorAll('map area');
const targetImage = document.getElementById('targetImage');

// 给每个区域绑定事件
areas.forEach(area => {
  // hover移入事件
  area.addEventListener('mouseover', () => {
    if (!area.classList.contains('active')) {
      targetImage.src = `hover-${area.id}.jpg`;
    }
  });

  // hover移出事件
  area.addEventListener('mouseout', () => {
    if (!area.classList.contains('active')) {
      targetImage.src = 'original.jpg';
    }
  });

  // 点击事件
  area.addEventListener('click', () => {
    // 先移除所有区域的激活类，确保只有一个区域处于激活状态
    areas.forEach(item => item.classList.remove('active'));
    
    if (area.classList.contains('active')) {
      // 取消激活
      area.classList.remove('active');
      targetImage.src = 'original.jpg';
    } else {
      // 激活当前区域
      area.classList.add('active');
      targetImage.src = `active-${area.id}.jpg`;
    }
  });
});

这种方式的好处是把状态绑定在DOM元素的类上，逻辑更清晰，也方便后续扩展样式（比如给激活的区域加额外视觉提示）。

核心思路就是：让hover事件只在元素未被点击激活时生效，通过状态变量或CSS类来区分两种状态，就能解决点击后hover覆盖背景的问题了。

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