Question

在我的输入中，我在每种类型的画布上绘制文本。我的问题是，如果我想更改显示文本的位置，我会再次使用不同的高度值调用 onTyping 函数，但是事件列表器一直在监听两个位置的类型，我无法确定何时阻止它。（我在输入上打字，然后在画布上同时看到两个位置（行高）。）

希望我的问题很清楚，谢谢！



<input onkeyup="onTyping()" class="text" onfocus="this.value=''" type="text" value=""/> 

<button class="lines" onclick="SwitchLine()"><img src="icons/up-and-down-opposite-double-arrows-side-by-side.png" alt=""></button>

let gLineLocation = 0 ;

function onTyping(canvasHeight = 50) {
  let inputText = "";
  let text = document.querySelector(".text");
  text.addEventListener("input", (ev) => {
    inputText = ev.target.value;
    gCtx.font = "40px Impact";
    // ctx.fillStyle = "red";/
    gCtx.strokeText(inputText, 20, canvasHeight);
});

}
function SwitchLine() {
gLineLocation++;

if (gLineLocation === 1) {
    onTyping (gCanvas.height / 2)
}
if (gLineLocation === 2) {
    onTyping(gCanvas.height - 10)
    gLineLocation=0;
}
}

多次添加事件侦听器

0 个答案: