Как получить обновление, чтобы оно перестало работать при нажатии?

Question

Вот фрагмент кода, в котором я пытаюсь остановить обновление, чтобы поставить точку на холсте.Когда я пытаюсь получить putPoint для возврата 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 на 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

Я делаю вывод, основываясь на подсказках из использованной и неиспользованной (например, перетаскивания переменной) частей вашего первого фрагмента, но мне кажется, что вы пытаетесь нарисовать точку, которая отслеживается с помощью мыши, а затем как только произошло событие щелчка, вы хотите начать рисование точек, перетаскивая мышью, пока этот щелчок не будет отпущен.

Во-первых, ваша проблема с отслеживанием по клику

Я думаю, вы неправильно понимаете, когда выполняются разные операторы. Во втором фрагменте все операторы вне функции-обработчика события test выполняются только один раз. Функция «test» будет вызываться при каждом щелчке мыши, но просто возвращает true и не меняет значение «clicked». Итак, утверждение:

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>

То, что я думаю, что вы собираетесь с вашим рендерингом холста:

Переместите мышь, затем щелкните и перетащите мышь.

  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>