为什么点击委托事件不起作用？

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") 将 return sign_in_out div引用，否则引用将为空。

When you use e.target it can be anything, it can be img, form, or input, the event.target returns the item on which user clicked. The target property of the Event interface is a reference to the object that dispatched the event.

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

为什么点击委托事件不起作用？

why click with delegate event not working?

javascript

click

onclick