javascript - 通过单击增加变量

Question

我有一个 Canvas ，我想通过单击来增加变量电压。问题是，当我单击 - 变量时，变量会随机增加一些。我需要点击一下 = 变量加一。

代码如下:

var canvas = document.getElementById("diodeCircuit");
var ctx = canvas.getContext("2d");
var voltage = 0;

function runCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  changeVoltage();
}

function changeVoltage() {
  window.addEventListener("click", doMouseClick, false);

  function doMouseClick(event) {
    x = event.pageX - canvas.offsetLeft;
    y = event.pageY - canvas.offsetTop;
    if (x >= 0 && x <= 1000 && y >= 0 && y <= 400) {
      voltage += 1;
    }
  }

  ctx.fillStyle = "#000";
  ctx.textAlign = "center";
  ctx.font = "30px sans-serif";
  ctx.fillText(voltage + " V", 500, 50);
}

setInterval(runCanvas, 100);

链接到 codepen 上的项目

Answer 1

setInterval(runCanvas, 100);

这会每秒调用您的 runCanvas 函数 10 次 - 它正在调用 doMouseClick 函数，该函数每秒创建 10 个点击监听器，通过单击您可以触发每个监听器听众。

移动这个:

window.addEventListener("click", doMouseClick, false);

在间隔函数回调之外，这样您最终只会得到一个点击监听器。