代码之家  ›  专栏  ›  技术社区  ›  Sheshank S.

如何防止keyUp事件侦听器多次触发[duplicate]

  •  0
  • Sheshank S.  · 技术社区  · 6 年前

    好吧,在问这个问题之前,我确信stackoverflow上已经有了这个问题的答案。。。但我什么也找不到,所以说:

    我正在用烧瓶创建一个网站。其中一部分就是发表评论。 enter image description here

    这是我的密码:

    (这是表格)

    <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>
    

    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 ! 我很确定当你按住一把钥匙的时候 一次。

    1 回复  |  直到 6 年前
        1
  •  0
  •   Marcus Parsons    6 年前

    keyUp 不是JavaScript中的有效事件。您必须获得正确的大小写,以便手动触发事件。改变 keyup

    通过阻止该事件阻止表单提交:

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