如何添加等价于.mouseLeave的触摸事件以实现悬停效果移除

嘿，我来帮你搞定这个触摸设备上的悬停移除问题！针对你提供的.snip1554组件，我们可以通过两种实用方式实现和mouseLeave一致的触摸端效果：

方案1：直接使用touchleave原生事件 #

触摸设备原生提供了touchleave事件，触发时机和桌面端mouseleave完全匹配——当触摸点离开目标元素时触发。你可以给.snip1554同时绑定两类事件，统一处理悬停效果的移除：

const snipCards = document.querySelectorAll('.snip1554');

snipCards.forEach(card => {
  // 桌面端鼠标离开逻辑
  card.addEventListener('mouseleave', () => {
    removeHoverEffect(card);
  });
  
  // 触摸端离开逻辑
  card.addEventListener('touchleave', () => {
    removeHoverEffect(card);
  });
});

// 统一的悬停移除函数，按需修改逻辑
function removeHoverEffect(element) {
  // 示例：移除自定义hover类（和你的CSS hover样式对应）
  element.classList.remove('card-hovered');
  // 或者直接操作元素样式：element.querySelector('figcaption').style.opacity = '0';
}

方案2：用pointerleave实现跨设备统一（推荐） #

如果你的项目需要兼容手写笔等更多输入设备，Pointer Events会更省心——它把鼠标、触摸、手写笔的事件统一成一套API，pointerleave会在所有类型的指针离开元素时触发，无需分别绑定多类事件：

const snipCards = document.querySelectorAll('.snip1554');

snipCards.forEach(card => {
  card.addEventListener('pointerleave', () => {
    removeHoverEffect(card);
  });
});

function removeHoverEffect(element) {
  // 替换成你实际需要的悬停移除逻辑
  element.classList.remove('card-hovered');
}

额外小技巧：避免触摸端hover残留 #

有些触摸设备第一次点击会触发hover状态导致效果残留，你可以搭配touchstart事件优化体验：

snipCards.forEach(card => {
  card.addEventListener('touchstart', (e) => {
    e.preventDefault(); // 阻止默认点击行为，避免hover状态残留
    // 如需触摸开始时触发悬停效果，可在这里添加对应逻辑
    card.classList.add('card-hovered');
  });
});

结合你提供的HTML结构，只要让JS里的card-hovered类和CSS中的.snip1554:hover样式保持一致，就能完美实现跨设备的悬停切换效果啦。

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