为什么带有委托事件的ajax无法正常工作？

Question

我试图绑定文档以委派我的单击事件，如果用户从登录页面的一部分中单击应将其删除或删除，但是当我单击登录页面时除登录页面外，其余部分仍将被删除（例如输入）。它应该冒泡到div登录页面，还是无法正常工作？它让我困惑了两天，请帮助我修复它。

const loginbtn = document.getElementById('loginbtn')
const whitepart = document.getElementById('whitepart')
const loginpage = document.createElement('div')
loginpage.id = "loginpageid"
loginbtn.addEventListener('click', () => {
  whitepart.appendChild(loginpage)
  loginpage.innerHTML = `         
      <div id="sign_in_out" >  
        <div id="logopaint">
            <img src="../image/FE_logo-2.png" alt="sorry, something worng！">
        </div>
        <form id="forclick">
            <input type="email" name="user_email" id="mail" placeholder="Email" autocomplete="email">
            <input type="password" name="user_password" id="password" placeholder="Password" autocomplete="current-password">
        </form>
      </div>`
  const signinpage = document.getElementById('sign_in_out')
  if (!!signinpage) {
    document.addEventListener('click', (e) => {
      if (e.target !== signinpage) {
        loginpage.removechild(signinpage)
      }
    })
  }

Answer 1

在您的单击侦听器内部，将e.target !== signinpage更改为e.target.closest("#sign_in_out")，因此，如果用户在登录页面内单击，则e.target.closest("#sign_in_out")将返回sign_in_out div引用，否则引用将为空。

当您使用e.target时，它可以是任何东西，也可以是img, form, or input，event.target返回用户单击的项目。Event接口的target属性是对调度事件的对象的引用。

document.addEventListener('click', (e) => {
      if (e.target.closest("#sign_in_out") === null) {
        loginpage.removechild(signinpage)
      }
 })