我试图绑定文档以委派我的单击事件,如果用户从登录页面的一部分中单击应将其删除或删除,但是当我单击登录页面时除登录页面外,其余部分仍将被删除(例如输入)。它应该冒泡到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_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)
}
})