javascript - 文字在第二次点击时被卡住

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

那不是很重要，只是背景信息

我有一个代码，当用户单击我的canvas元素时会触发该代码，此代码的目的是确定终端（也称为画布）支持的功能

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

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

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

现在，在添加第二个代码块之前，它可以正常工作，但是一旦添加了第二个代码块，似乎两个代码块都停留在第二个标签上

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

这是我的代码，我已经看了两个小时试图修复它，我现在将其堆叠

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();

最佳答案

我发现了问题

因为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();

关于javascript - 文字在第二次点击时被卡住，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38259333/