移动端Onclick事件失效，如何修复图片切换功能？

问题分析 #

当前代码在移动端无法正常触发onclick事件实现图片切换，核心原因包括：

• 移动端浏览器对原生onclick存在300ms延迟，部分场景下可能不触发；
• 错误使用touchmove事件（该事件在触摸移动时触发，而非点击动作），导致逻辑不符合“点击切换”的需求。

修复方案 #

1. 替换触摸事件类型 #

将touchmove替换为touchend（触摸动作结束时触发，更贴合点击行为），同时保留onclick兼容桌面端。

2. 优化切换逻辑（可选） #

若需求是点击来回切换图片，可合并函数逻辑，避免冗余代码。

修改后的代码 #

JavaScript 代码 #

// 合并切换逻辑，实现点击来回切换图片
function toggleImage() {
  const img = document.getElementById("el-image");
  const frSrc = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-FR.png";
  const elSrc = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-EL.png";
  img.src = img.src === frSrc ? elSrc : frSrc;
}

HTML 代码 #

<html>
  <img id="el-image" style="margin-bottom:15px" src="https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-FR.png" />

  <div class="grve-element grve-box-icon grve-large grve-side-icon grve-vertical-align-middle grve-layout-1" onclick="toggleImage()" ontouchend="toggleImage()" style="cursor: pointer; -webkit-tap-highlight-color: transparent;">
    <div class="grve-box-title-wrapper">
      <div class="grve-wrapper-icon">
        <i aria-hidden="true" class="grve-box-icon grve-text-primary-2 iconbreztel icon-breztelpicto-bretzel-noir"></i>
      </div>
      <div class="grve-box-title grve-leader-text">Uf Elsassich !</div>
    </div>
  </div>
</html>

额外优化说明 #

• 添加-webkit-tap-highlight-color: transparent;移除移动端点击时的默认高亮效果，提升交互体验；
• 合并函数为toggleImage，通过判断当前图片src实现来回切换，更贴合“点击切换”的核心需求。

如果仍需保留原有的两个独立切换逻辑（比如不同动作触发不同图片），则仅修改HTML的事件属性：

<div class="grve-element grve-box-icon grve-large grve-side-icon grve-vertical-align-middle grve-layout-1" onclick="myFunction()" ontouchend="myFunction()" style="cursor: pointer; -webkit-tap-highlight-color: transparent;">
  <!-- 内容不变 -->
</div>

（注：原touchmove事件不符合点击需求，建议直接移除）

内容的提问来源于stack exchange，提问作者Seb-Schaa