只计算一次点击答案

【问题标题】：Count Click Only Once只计算一次点击
【发布时间】：2020-06-09 08:56:49
【问题描述】：

这是我的代码：

<html>
  <body>
    <script>
      var clicks = 0;
      function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
      }    
    </script>

    <p>Clicks: <a id="clicks">0</a></p>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
  </body>
</html>

我正在尝试使用我找到的这个例子：

<body>
  <h1>Single click JS Button</h1>
  <button type="submit" onClick="this.disabled = true; return true;">Submit</button>
</body>

我对如何使用 onClick="this.disabled = true; 部分感到困惑，因为对于我的代码，我在编写 onClick 时已经调用了该函数。我用onClick="clickMe()。

你可以拥有onClick 两次吗？我想使用onClick="this.disabled = true;，因为如果用户再次单击该按钮，我不想继续增加点击量。如果他们单击一次，我只想增加一次，然后禁用该按钮，或者之后不增加计数。

注意可能的重复

我不认为这是另一个问题的重复，因为 jQuery click() 只有一次，但我使用的是 JavaScript。没学过jQuery (jQuery click() only once)*

【问题讨论】：

includehelp.com/code-snippets/…
您需要在提交按钮内使用 return false 否则它将提交表单并忘记您的 js 计数器。否则你可以使用按钮类型而不是提交类型。
@bestinamir 我没有在我的代码中使用提交按钮。我的代码是你所指的那个上面的 sn-p。

标签： javascript html

【解决方案1】：

请看这里：

var clicks = 0;
function clickME(el) {
   el.disabled = true;
   clicks += 1;
   document.getElementById("clicks").innerHTML = clicks;
}

<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>

【讨论】：

@YousefTukachinsky 你能解释一下我为什么需要（这个）以及 el 的含义吗？
this 指的是导致事件的元素。你需要它来制作这个元素disabled
我仍然对 el 在做什么感到困惑，我知道 javascript 中的 el 只是一个引用元素的标识符，但为什么我不需要多个 el 呢？我理解它的方式是 el 只是一个按钮的标识符。我有多个，所以我不需要每个按钮的声明吗？
该函数接收元素作为参数，并使其禁用。每个按钮都将自己作为参数发送，因此当他调用该函数时，该函数使 him 禁用
每个按钮都不需要这个。除了上面的片段之外，您不需要任何东西

【解决方案2】：

addEventListener 选项 once:true - 在您的情况下看起来是一个完美的选择。

代码中有更多解释

var clicks = 0
function clickME(event) {
  clicks += 1

  document.getElementById("clicks").innerText = clicks // innerText is more suitable in this case

  if (event.target.className.includes(`auto-disable`)) {
    event.target.disabled = true // auto disabling if you need it
  }
}

document.querySelectorAll(`button`) // select all buttons
  .forEach( // loop through the elements
    // addEventListener with options once:true. once option designed exactly for your purposes, to fire event only once
    el => el.addEventListener(`click`, clickME, {once: true})
  )

<p>Clicks: <a id="clicks">0</a></p>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button" class="auto-disable">Click me</button>
<button type="button" class="auto-disable">Click me</button>

【讨论】：