Onclick 在移动设备上无法制作翻转图像答案

【问题标题】：Onclick doesn't work on mobile device to make a flip imageOnclick 在移动设备上无法制作翻转图像
【发布时间】：2022-10-24 21:36:02
【问题描述】：

Onclick 不适用于下面的此代码。这个想法是通过另一个翻转图像。我该如何解决？非常感谢

function myFunction() {
  document.getElementById("el-image").src = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-EL.png";
}

function myFunction2() {
  document.getElementById("el-image").src = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-FR.png";
}

<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="myFunction()" touchmove="myFunction2()" style="cursor: pointer"><div class="grve-box-title-wrapper"><div class="grve-wrapper-icon" style=""><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>

【问题讨论】：

看起来它工作正常，我只是用 code-sn-p 编辑你的问题。

标签： javascript events mobile

【解决方案1】：

您的 DOM 结构不正确（缺少 body 标签），这在现代浏览器上通常无关紧要，但在某些移动浏览器上可能会有所不同。

我添加了 body 元素并在此处对其进行了格式化：

<html>
<body>
  <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="swapImage()"" style="cursor: pointer">
    <div class="grve-box-title-wrapper">
      <div class="grve-wrapper-icon" style=""><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>
</body>
</html>

关于脚本，函数名称非常相似，并没有描述函数的用途，因此我将它们替换为一个命名更解释性的脚本。

const isSwapped = false;
const ELIMAGE = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-EL.png";
const FRIMAGE = "https://labelhistoire.fr/wp-content/uploads/2022/10/texte-il-etait-une-fois-FR.png";

function swapImage() {
  if(isSwapped) {
    document.getElementById("el-image").src = ELIMAGE;
    isSwapped = false;
  }
  else {
    document.getElementById("el-image").src = FRIMAGE;
    isSwapped = true;
  }
}

【讨论】：

谢谢，我刚刚添加了body，但这并没有改变我的问题
通过更多更改更新了答案，您可以尝试一下吗？