我试图绑定文档以委派我的单击事件，如果用户单击退出登录页面的那一部分应该将其删除或删除，但是除了单击登录页面时的登录页面之外，其余部分仍被删除（例如输入）。它应该冒泡到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)
}
})
}
在您的点击监听器内部更改e.target !== signinpage为e.target.closest("#sign_in_out")，因此，如果用户在登录页面内单击，e.target.closest("#sign_in_out")则返回sign_in_outdiv引用，否则引用将为null。
当您使用
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)
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句