时间戳

首页 > 解决方案 > 如何防止我的 keyUp 事件侦听器多次触发

javascript - 如何防止我的 keyUp 事件侦听器多次触发

问题描述

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

我正在使用烧瓶创建一个网站。其中之一是发表评论。在此处输入图像描述

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

这是我的代码：

（这是表格）

<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 键，它会提交多个评论。

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

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

标签： javascripthtmleventsflaskaddeventlistener

解决方案

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

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

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

推荐阅读