为什么单击事件在单击两次后起作用 VANILLA

Question

我正在尝试通过单击一次事件侦听器来触发一个函数。但是，如果我不执行 F5 一次单击后触发，则它会在两次单击（第一次）后发生。

代码：

HTML

    <div class="main-header-navbar">
   ....
        <span class="main-header-navbar-right-icons">
            <i class="fas fa-search header-icon"></i>
            <i class="fas fa-plus header-icon"></i>
        </span>
    </div>

JS

const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
    event.preventDefault();
    if (ADD_FORM.style.display === "none") {
        ADD_FORM.style.display = "flex";
    } else ADD_FORM.style.display = "none";
});

我错过了什么？

Answer 1

您可能需要将 style="display: none;" 添加到您的 ADD_FORM 以便它最初是隐藏的，然后当您单击 fa-plus 时它会显示。请参阅下面的代码段：

const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");

ADD_FORM_BUTTON.addEventListener("click", function(event) {
  event.preventDefault();
  if (ADD_FORM.style.display === "none") {
    ADD_FORM.style.display = "flex";
  } else {
    ADD_FORM.style.display = "none"
  };
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

<div class="main-header-navbar">
  <span class="main-header-navbar-right-icons">
    <i class="fas fa-search header-icon"></i>
    <i class="fas fa-plus header-icon"></i>
  </span>
  <div id="form" style="display: none;">ADD_FORM</div>
</div>

为什么单击事件在单击两次后起作用 VANILLA

Why click event works after two clicks VANILLA

javascript

click

event-listener

event-handling

dom-events