如何防止我的 keyUp 事件侦听器多次触发 [重复]

Question

好的，在问这个问题之前，我确定在 stackoverflow 上已经有答案了……但我找不到任何东西，所以这里是：

我正在使用烧瓶创建网站。其中之一是制作 cmets。

当我点击回车时，它应该提交表单以向数据库添加评论。

这是我的代码：

（这是表格）

<form method="POST">
    {{ form.hidden_tag() }}
    {% if form.comment.errors %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
        <div class="invalid-feedback" style="display: block;">
            {% for error in form.comment.errors %}
                <span>{{ error }}</span>
            {% endfor %}
        </div>
    {% else %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
    {% endif %}
    {{ form.submit(class="btn btn-outline-info", id="submit", style="display:none;") }}
</form>

当按下回车键时，我正在使用这个 javascript 提交表单：

var input = document.getElementById("comment-input");
input.addEventListener("keyup", function(event) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Trigger the button element with a click
    document.getElementById("submit").click()
  }
});

问题是，通常如果我在输入评论后按 Enter 键，它可以正常工作，但如果我在输入评论后按住 Enter 键，它会提交多个 cmets。

但是，如果您查看我的代码，它会显示 keyUp 而不是 keyDown！我很确定当你按住一个键时，它仍然只有keyUp 一次。

我已经通过stackoverflow等查看了大约2个小时，希望这个问题对我的情况有所帮助。

Answer 1

keyUp 不是 JavaScript 中的有效事件。您必须获得正确的大小写才能手动触发事件。在您的事件监听器中将keyUp 更改为keyup，它应该可以正常工作。

通过阻止该事件来阻止表单提交：

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
}, false);