javascript - 单击时如何获取更新以停止运行？

Question

这是一个代码段，我试图让更新停止运行，以便我可以在 Canvas 上放一个点。当我尝试让 putPoint 返回 clicked = true 时，无论我是否单击，它都会使 clicked 等于 true。当且仅当我单击时，我只想返回 true。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;

var radius = 2;
var dragging = false; // wether or not the mouse button is held down
ctx.lineWidth = radius * 2;
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;
var clicked = false;
// here is where I declare clicked = true globally

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, true);
  ctx.fill();

  requestAnimationFrame(update);
}

canvas.addEventListener("mousemove", setMousePosition, false);

function setMousePosition(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
}

//console.log("before update " + clicked);

if (clicked != true) {
  update();
  //console.log("inside update " +clicked);
}
// here is the code I want to stop when I click

//console.log("after update " + clicked);

function putPoint() {
  //e.clientX and e.clientY get the mouse position
  ctx.beginPath();
  //e.clientX and e.clientY get the mouse position
  ctx.arc(mouseX - 10, mouseY - 10, radius, 0, Math.PI * 2);
  //ctx.arc(e.offsetX, e.offsetY, radius, 0, Math.PI * 2);
  ctx.fill();
  //console.log("inside putPoint " + clicked);
}

//putPoint puts a dot on the canvas at the mouse position. But it wont fire unless
//I stop update, which tracks my dot.

//console.log("after putPoint " + clicked);


canvas.addEventListener("mousedown", putPoint);
//console.log(putPoint());

//console.log(clicked);

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;

  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

<canvas id=myCanvas>
</canvas>

---

下面是问题的较小再现。基本上，当我单击该元素时，我试图将我的变量更新为 true。但是，当我在测试函数中返回 true 或什至将 clicked to 设置为 true 时，无论我是否单击，它仍然显示为 true。它不会动态变化。也许我使用了错误的事件？我不确定。

var clicked = false;

console.log(clicked);
function test () {
    return true;
}

clicked = test();

console.log(clicked);

document.getElementsByTagName("h1")[0].addEventListener("mousedown", test);

Answer 1

我是根据您第一个代码段中已使用和未使用(例如拖动变量)部分的线索进行一些推断，但在我看来您正在尝试绘制一个用鼠标跟踪的点，然后单击事件发生后，您希望开始绘制点，在鼠标后拖动直到释放单击。

首先，您的“点击”跟踪问题

当执行不同的语句时，我认为你误解了。在你的第二个片段中，“测试”事件处理函数之外的所有语句只执行一次。每次鼠标单击都会调用“测试”函数，但只会返回 true 并且不会更改“已单击”的值。所以，声明:

var clicked = false;

...和声明:

clicked = test();

...每个只执行一次。这是一个简单的示例，向您展示如何跟踪该值的切换。尝试简单的点击并在松开之前按住点击一秒钟以了解想法。

  var clicked = false;
  var clickableArea = document.getElementById("clickable");
  clickableArea.addEventListener('mousedown', function() {
    clicked = true;
    console.log('Clicked, value of clicked var: ' + clicked);
  });

  clickableArea.addEventListener('mouseup', function() {
    clicked = false;
    console.log('Released, value of clicked var: ' + clicked);
  });

<div id="clickable">Click Me</div>

我认为您使用 Canvas 渲染的目的是什么:

四处移动鼠标，然后单击并拖动鼠标。

  var canvas, ctx;
  var radius = 2;
  var mouseX = 0;
  var mouseY = 0;
  var clicked = false;
  var dragging = false;


  // manages the drawing cycle
  function putPoint() {

    // clear the canvas if not dragging, or just before the first draw of a dragging cycle
    if(!dragging) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    dragging = clicked;

    // draw
    var offset = dragging ? 10 : 0;
    ctx.beginPath();
    ctx.arc(mouseX-offset, mouseY-offset, radius, 0, 2 * Math.PI, true);
    ctx.fill();

    // kick off another cycle
    requestAnimationFrame(putPoint);
  }


  // event handlers

  function trackMouse(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  }

  function startedDragging() {
    clicked = true;
  }

  function quitDragging() {
    clicked = false;
    dragging = false;
  }


  // only runs once when called below, sets things up, starts the drawing cycle
  function start() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    ctx.lineWidth = radius * 2;

    // attach events to handlers
    canvas.addEventListener("mousemove", trackMouse, false);
    canvas.addEventListener("mousedown", startedDragging);
    canvas.addEventListener("mouseup", quitDragging);

    requestAnimationFrame(putPoint);
  }

  start(); // calling start to kick things off

<canvas id="myCanvas">
</canvas>