点击后点击一个可点击的区域是不可点击的？

Question

正如标题所说，我试图在我的画布上制作可点击区域＆＃39;无法点击＆＃39;。我有多个这些区域，他们作为按钮。它们运行的​​功能在单击时显示图像。我想要做的是，当点击其中一个区域时，不能再次点击它，但其他区域仍然可以（直到它们也被点击）。

这里有按钮的工作方式。我定义了一个可点击的区域，如下所示：

    var rect = {
        x: 50,
        y: 180,
        width: 150,
        height: 133
    };

我正在使用事件监听器来查看是否点击了该区域：

    canvas.addEventListener('click', function (evt) {
        var mousePos = getMousePos(canvas, evt);
        debugger;
        if (isInside(mousePos, rect)) {

            safeOpen.onload = function () {
                ctx3.drawImage(safeOpen, 50, 180, 150, 133);
            };
            safeOpen.src = imageArray[4];
        }


        if (isInside(mousePos, rect2)) {

            safeOpen.onload = function () {
                ctx3.drawImage(safeOpen, 220, 180, 150, 133);
            };
            safeOpen.src = imageArray[4];
        }


        if (isInside(mousePos, rect3)) {

            safeOpen.onload = function () {
                ctx3.drawImage(safeOpen, 390, 180, 150, 133);
            };
            safeOpen.src = imageArray[4];
        }
    } false);

isInside功能：

    function isInside(pos, rect, rect2, rect3, ) {
        return pos.x > rect.x && pos.x < rect.x + rect.width && pos.y < rect.y + rect.height && pos.y > rect.y
        return pos.x > rect2.x && pos.x < rect2.x + rect2.width && pos.y < rect2.y + rect2.height && pos.y > rect2.y
        return pos.x > rect3.x && pos.x < rect3.x + rect3.width && pos.y < rect3.y + rect3.height && pos.y > rect3.y
    }