如何仅一次单击设置onkeypress或onkeydown？

Question

我试图在单击一次onkeypress或onkeydown之后使用onkeypress或onkeydown，但onkeypress会被删除，但我无法做到这一点，但我尝试了但不起作用。

下面是我的摘录。

textarea.onkeypress = myPress;

    function myPress(){
        let setTime = setInterval(timeUpdate, 1000);
        function timeUpdate(){
            time.innerHTML =Number(time.innerHTML)+1;
        }
    }

<div id="time">0</div>
    <textarea  name="" id="textarea" cols="30" rows="10"></textarea>

根据我的代码段，当我键入onkeypress时，它看起来像是多次单击，而setInterval的行为就像是每隔1秒就没有时间，因此，当我在textarea中输入内容时，我需要每隔一秒钟输入一次。谢谢。

Answer 1

设置了时间间隔后，您需要删除事件。

textarea.onkeypress = myPress;

    function myPress(){
        let setTime = setInterval(timeUpdate, 1000);
        textarea.onkeypress = null;
        function timeUpdate(){
            time.innerHTML =Number(time.innerHTML)+1;
        }
    }

<div id="time">0</div>
    <textarea  name="" id="textarea" cols="30" rows="10"></textarea>

Answer 2

您应该添加和删除事件监听器。目前，每个按键都在触发，而不仅仅是第一个按键。类似于：

function myPress() {
    textarea.removeEventListener('keypress', myPress, false);
    // Do something else here
}

const textarea = document.getElementById('textarea');
textarea.addEventListener('keypress', myPress, false);

MDN上有addEventListener的完整摘要，这应该有助于更详细地说明如何使用它：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 3

您需要跟踪先前触发的事件。替代方法可以是处理程序外部的变量，也可以是元素中的data attribute (aka dataset in js)，这是一种标记。

data attribute (aka dataset in js)

document.querySelector("#textarea").addEventListener("keypress", function() {
  if (time.dataset.time === "-1") {
    time.dataset.time = "1";
    setInterval(function() {
      time.innerHTML = Number(time.innerHTML) + 1;
    }, 1000);
  }
});

我以后将不再使用该处理程序，可以

<div id="time" data-time="-1">0</div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

。