почему клик с делегатом не работает? - PullRequest
Новая
       12

почему клик с делегатом не работает?

1 голос
/ 16 марта 2020

Я пытался связать документ, чтобы делегировать мое событие click, если пользователь щелкает часть страницы входа, она должна исчезнуть или быть удалена, но, за исключением страницы входа, когда я щелкала страницу входа, в другой части она все равно удалялась (как ввод). он должен всплывать на страницу входа 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)
      }
    })
  }

1 Ответ

2 голосов
/ 16 марта 2020

Внутри вашего прослушивателя кликов измените 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 возвращает элемент, по которому щелкнул пользователь. Свойство target интерфейса Event является ссылкой на объект, отправивший событие. 

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