javascript - 在鼠标悬停时添加事件，如何仅添加一次事件？

Question

我有一个事件监听器，其工作原理如下(伪代码):

canvas.onmousemove = function (e) { checkCollision(e); };

var checkCollision = function(e){
    var context = canvas.getContext('2d');
    var coordinates = getMouseXY();

    // draw any shape with the context

    if(context.isPointInPath(coordinates.X, coordinates.Y){
          $(canvas).on('click', alertFunction, e);
          return; //stop the function from doing anything else
    }

    $(canvas).off('click', alertFunction, e);      
};

var alertFunction = function(e){
    alert("this alert should only show once per click");
};

我的预期结果:当我将鼠标悬停在 Canvas 中绘制的特定线条上时，我可以单击以获取警报。

实际结果:当我单击 Canvas 中的线条时，我收到很多警报。我的猜测:对于我在元素上移动的每个像素，都会添加点击监听器。因此，如果我将鼠标悬停在该元素上，警报将会播放很多次。如果我将鼠标悬停在元素之外，则对于我移到元素之外的每个像素，都会删除一个事件监听器。

有更好的方法吗？

Answer 1

如果你像这样改变呢？

canvas.onmousemove = function (e) { checkCollision(e); };

var checkCollision = function(e){
    var context = canvas.getContext('2d');
    var coordinates = getMouseXY();

    // draw any shape with the context

    if(context.isPointInPath(coordinates.X, coordinates.Y){
          $(canvas).off().on('click', alertFunction, e);
          return; //stop the function from doing anything else
    }
};

var alertFunction = function(e){
    alert("this alert should only show once per click");
};