Question

根据用户点击画布的位置执行某项操作的功能。但是，在此功能结束时，我需要检查下一个位置是否在特定位置。我需要暂停该功能，等待下一次点击，然后根据下次点击的位置，我需要显示两个警报之一。

基本上，我想知道是否有办法暂停当前功能并阻止它继续，直到用户再次点击画布。我应该能够轻松地从那里继续。

谢谢！

if (leftSpot || rightSpot){
    //wait for click
        if (clicked in specific spot)
            alert("clicked yellow,submit form");
        else{
            alert("no click,nosubmit, reset");
            canvas.width = canvas.width;
            Squares();
            fill();
            }
    }

我的原始点击检测：

/*  relative coordinate finding functions from     http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ ,modifications made     */

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  var canvas = document.getElementById('checkersGame');
  var context = canvas.getContext('2d');

  canvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    locationFinding(mousePos.x, mousePos.y);
  }, false);

/*  END of relative coordinate finding functions from http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ ,modifications made */

Answer 1

最简单的方法是使用事件监听器。你可以这样做：

if (leftSpot || rightSpot){
    document.getElementById("elementID").onclick = function() {
        // continue your code here
     };
}

Answer 2

使用标志变量停止收听点击事件，直到locationFinding完成。

var pauseListening=false;

canvas.addEventListener('click', function(evt) {


  if(!pauseListening){

      pauseListening=true;

      var mousePos = getMousePos(canvas, evt);

      locationFinding(mousePos.x, mousePos.y);

      pauseListening=false;

  }

}, false);

暂停javascript直到下一次点击？

2 个答案: