HomeLập trìnhPhpTrình xử lý...

Trình xử lý sự kiện JS xung đột với hành động biểu mẫu PHP


Tôi đang cố gắng tạo biểu mẫu đăng nhập bật lên khi người dùng nhấp vào đăng nhập nhưng đóng lại khi người dùng nhấp vào bên ngoài biểu mẫu. Việc đăng nhập phải được xử lý thông qua tập lệnh PHP.
Hiện tại, khi tôi nhấp vào nút đăng nhập trên biểu mẫu, không có gì xảy ra. Tôi biết tập lệnh hoạt động vì khi tôi loại bỏ tất cả các hiệu ứng JS ưa thích, đăng nhập sẽ hoạt động.
Vì vậy, câu hỏi của tôi là, làm thế nào tôi có thể có tất cả? Có cách giải quyết nào không, hay tôi nên thử tìm một phương pháp đóng cửa sổ khác?

<button onClick = loginMenu() id='login-button'>
                <i class="fas fa-user-circle"></i>
</button>
<div class="form" id='login-menu'>
    <div class="modal">
        <form action="test.php" method="post">
            <input type="text" name="username" placeholder="username = lib" id="username" required/>
            <input type="password" name="password" placeholder="password = 123" id="password" required/>
            <button type="submit">login</button>
        </form>
    </div>
</div>
function loginMenu() {
  let modalRoot = document.getElementById("login-menu");
  let button = document.getElementById("login-button");
  let modal = document.querySelector(".modal");

  modalRoot.addEventListener("click", rootClick);
  button.addEventListener("click", openModal);
  modal.addEventListener("click", modalClick);

  function rootClick() {
    modalRoot.classList.remove("visible");
  }

  function openModal() {
    modalRoot.classList.add("visible");
  }

  function modalClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
  }
}

đây là codepen tôi lấy cái này từ
Đây chỉ là những đoạn tôi có đầu, liên kết đến tập lệnh JS, v.v. trong phiên bản đầy đủ.


Tôi đã tự giải quyết nó. Vấn đề là với sự kiện bong bóng. Tôi sẽ đăng mã trong trường hợp bất kỳ ai tìm thấy bài đăng này qua Google.

let modalRoot = document.getElementById("login-menu");
function loginMenu() {
  let button = document.getElementById("login-button");
  button.addEventListener("click", openModal);

  function openModal() {
    modalRoot.classList.add("visible");
  }
}

loginMenu();

window.addEventListener("click", function(e) {
  if (
    !document.getElementById("login-button").contains(e.target) &&
    !document.getElementsByClassName("modal")[0].contains(e.target)
  ) {
    modalRoot.classList.remove("visible");
  }
});

Chủ đề này đã tự động đóng sau 182 ngày kể từ lần trả lời cuối cùng. Trả lời mới không còn được phép.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status