javascript - 第二次点击时文本卡住

Question

我有 2 个数组，一个包含 html 标签，另一个包含 css 属性

这并不重要，只是背景信息

我有一个代码，当用户单击我的 Canvas 元素时会触发该代码，现在该代码的目的是确定终端(也称为 Canvas )支持什么

如果 Canvas 仅支持 HTML，则触发第一个代码块；如果终端同时支持 HTML 和 CSS，则触发第二个代码块

第一个代码块从 htmltags 数组中选择一个随机标签，然后将其显示在用户单击 Canvas 的位置

支持 HTML 和 CSS 的第二个代码块采用 2 个数组并将它们组合起来，并从新数组中选择一个随机标签或属性，并将其显示在用户单击的位置

现在，在我添加第二个代码块之前，它运行正常，但是一旦我添加了第二个代码块，似乎两个代码块都粘在第二个标签上

例如点击1:<br>点击2:<i>单击3-无限:<i>

这是我的代码，我已经看了 2 个小时试图修复它，我现在把它放在堆栈上

function writeMessage(canvas, message, x, y) {
    var terminal = canvas.getContext('2d');
    ClearCanvas();
    terminal.font = "20px Comic Sans MS";
    terminal.fillStyle = "rgb(0,255,1)";
    terminal.textAlign = "center";
    terminal.fillText(message, x, y);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");
fitToContainer(canvas);

terminal.fillStyle = "#000000";
terminal.fillRect(0, 0, canvas.width, canvas.height);
terminal.font = "20px Comic Sans MS";
terminal.fillStyle = "rgb(0,255,1)";
terminal.textAlign = "center";
terminal.fillText("Coding Idle Terminal", canvas.width / 2, canvas.height / 2);

function WriteToCanvas() {
    if (Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 0) {
        var rand = Math.floor(Math.random() * 122) + 1;
        var tag = htmltags[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var message = tag;
            writeMessage(canvas, message, mousePos.x, mousePos.y);
        });
    } else if (Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 1) {
        var tagList = htmltags.concat(csstags);
        var tagListLength = tagList.length;
        var rand = Math.floor(Math.random() * tagListLength) + 1;
        var tagg = tagList[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var message = tagg;
            writeMessage(canvas, message, mousePos.x, mousePos.y);
        });
    }
}

function ClearCanvas() {
    terminal.clearRect(0, 0, canvas.width, canvas.height);
    terminal.fillStyle = "#000000";
    terminal.fillRect(0, 0, canvas.width, canvas.height);
}

function fitToContainer(canvas) {
    canvas.style.width = '100%';
    canvas.style.height = '100%';

    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
}

WriteToCanvas();

Answer 1

我发现了问题

因为 eventListenerExist 是一个全局变量，一旦第一个代码块设置了事件监听器，第二个代码块就无法使用更新的标签重置监听器，所以我的解决方案是检查每次调用的点击次数，而不是添加这里的事件监听器是我为将来访问该问题的人更新的代码

function writeMessage(canvas, message,x,y) {
        var terminal = canvas.getContext('2d');
        ClearCanvas();
        terminal.font = "20px Comic Sans MS";
        terminal.fillStyle = "rgb(0,255,1)";
        terminal.textAlign = "center";
        terminal.fillText(message, x, y);
}
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");

terminal.fillStyle = "#000000";
terminal.fillRect(0,0,150,200);

function WriteToCanvas(){
    if(Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 0){ 
        var rand = Math.floor(Math.random() * 122) + 1;
        var tag = htmltags[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt){
            var mousePos = getMousePos(canvas,evt);
            var message = tag;
            writeMessage(canvas, message,mousePos.x,mousePos.y);
        });
    }else if(Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 1){
        var tagList = htmltags.concat(csstags);
        var tagListLength = tagList.length;
        var rand = Math.floor(Math.random() * tagListLength) + 1;
        var tagg = tagList[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt){
            var mousePos = getMousePos(canvas,evt);
            var message = tagg;
            writeMessage(canvas, message,mousePos.x,mousePos.y);
        });
    }
}

function ClearCanvas(){
    terminal.clearRect(0,0,canvas.width,canvas.height);
    terminal.fillStyle = "#000000";
    terminal.fillRect(0,0,150,200);
}

WriteToCanvas();