如何在 iPhone 上使用 onclick答案

【问题标题】：How to use onclick on iPhone如何在 iPhone 上使用 onclick
【发布时间】：2020-04-19 13:24:04
【问题描述】：

我正在开展一个项目，该项目基本上要求用户输入三个数字输入，然后在他们单击提交按钮后根据他们输入的内容生成说明。我能够让它完美地满足我在台式电脑上的需要，但是当我在我的 iPhone 7 上尝试它时它不起作用。它确实可以，但是可以在我使用 Chrome 的 Android 手机上运行，所以这显然是 Safari/iOS 的问题。基本上在我的 iPhone 上，它允许我输入三个输入字段，但是当我单击提交按钮时没有任何反应。从我在网上看到的情况来看，这似乎是我正在使用的 onclick 功能的问题，但是我已经尝试了使用 cursor:pointer 的推荐修复方法徒劳无功。我在这方面也非常新手（近 20 年没有使用过 java/html，基本上是通过教程和示例偶然发现的），所以我没有尝试过一些没有很好说明的解决方案关于如何实施它们。我的完整代码如下，以帮助任何愿意帮助我的人。我只是希望它在 iOS 上的工作方式与在其他平台上的工作方式相同。

<!DOCTYPE html>
<html>
<head>
<style>

.button {
  background-color: #4CAF50;
  border: none;
  color: black;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

div {
  cursor: pointer;
  position: relative;
  width: 50%;
  margin:auto;
  left: 0;
  right: 0;
  text-align: left;
}

div.a {
  word-wrap: normal;
}

</style>
</head>
<body>

<div class="a">
<h2>Ficus Hedge Treatment</h2>
</div>

<div class="a">
<p>This will tell you how much water and product is needed for treatment:</p>
</div>

<div class="a">
<b>Hedge Length in feet:</b>
<br><input id = "length" type = number></input><br><br>
<b>Hedge Height in feet:</b>
<br><input id = "height" type = number></input><br><br>
<b>Space Between in feet:</b>
<br><input id = "space" type = number></input>
<button type = "button"
onclick="myFunction2()" class="button">
Submit
</button>
</div>

<br>
<br>
<br>
<div class="a">
<b><p id="demo"></p></b>
</div>

<script>

function myFunction2() {
var input1 = document.getElementById("length").value;
var input2 = document.getElementById("height").value;
var input3 = document.getElementById("space").value;
var plants = input1 / input3;
var gals = plants + 1;
var totDominion = input2 * plants * 0.1;
var totFert = input1 * 6 * .0067
totFert = totFert.toFixed(2);
var mixrate = totDominion / gals;
mixrate = mixrate.toFixed(2);
document.getElementById("demo").innerHTML = "You will need to mix " + mixrate + " oz of Dominion per gallon, and use " + gals + " gallons of water. You will also use " + totFert + " pounds of 15-0-15."
}

function myFunction(a, b, c) {
  return a * b * c;
}

</script>
</body>
</html>

【问题讨论】：

cursor:pointer css 只设置用于显示鼠标指针的图像/图标；它与处理事件无关。
iOS 支持称为“触摸”的事件，而不是传统的“点击”。您可以在这里查看完整答案stackoverflow.com/questions/18914568/…
谢谢，我看到了那个帖子，但我对如何在我的代码中实现它感到非常困惑。看起来我将不得不放弃很多我目前用来实现它的东西。我的假设是否正确？

标签： javascript html ios iphone onclick

【解决方案1】：

根据@lzbernardo 的参考，以下是您需要在脚本中添加并从按钮中删除onclick=MyFunction2() 并添加id="myFunction2" 的更改。检查窗口是否支持触摸事件并相应添加事件监听器

参考下面的代码

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    .button {
      background-color: #4CAF50;
      border: none;
      color: black;
      padding: 6px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    div {
      cursor: pointer;
      position: relative;
      width: 50%;
      margin:auto;
      left: 0;
      right: 0;
      text-align: left;
    }

    div.a {
      word-wrap: normal;
    }

    </style>
    </head>
    <body>

    <div class="a">
    <h2>Ficus Hedge Treatment</h2>
    </div>

    <div class="a">
    <p>This will tell you how much water and product is needed for treatment:</p>
    </div>

    <div class="a">
    <b>Hedge Length in feet:</b>
    <br><input id = "length" type = number></input><br><br>
    <b>Hedge Height in feet:</b>
    <br><input id = "height" type = number></input><br><br>
    <b>Space Between in feet:</b>
    <br><input id = "space" type = number></input>
    <button type = "button" id="myFunctionBtn2" class="button">
    Submit
    </button>
    </div>

    <br>
    <br>
    <br>
    <div class="a">
    <b><p id="demo"></p></b>
    </div>

    <script>
    //check if touchevent is available
    let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
    //bind touch event to the button with id = myFunction2 and call myFunction2 function
document.getElementById('myFunctionBtn2').addEventListener(touchEvent, myFunction2);    

    function myFunction2() {
    var input1 = document.getElementById("length").value;
    var input2 = document.getElementById("height").value;
    var input3 = document.getElementById("space").value;
    var plants = input1 / input3;
    var gals = plants + 1;
    var totDominion = input2 * plants * 0.1;
    var totFert = input1 * 6 * .0067
    totFert = totFert.toFixed(2);
    var mixrate = totDominion / gals;
    mixrate = mixrate.toFixed(2);
    document.getElementById("demo").innerHTML = "You will need to mix " + mixrate + " oz of Dominion per gallon, and use " + gals + " gallons of water. You will also use " + totFert + " pounds of 15-0-15."
    }

    function myFunction(a, b, c) {
      return a * b * c;
    }

    </script>
    </body>
    </html>

【讨论】：