主页 / 问题 / 1602816
Accepted
Teoom07
Asked:2024-12-19 16:05:02 +0000 UTC2024-12-19 16:05:02 +0000 UTC

如何正确从元素中删除事件？

  • 772

我有一个带有表单和单独按钮（进一步closeButton）的模式窗口。当模式窗口打开时，我在closeButton上挂起一个事件，该事件关闭模式窗口。窗口关闭后，我希望从按钮中删除该事件。如果您只是打开和关闭模式窗口，则closeButton的事件将被删除，但如果您提交表单，则事件将累积在closeButton上。为什么事件在一种情况下会累积，但在另一种情况下，行为正是我所期望的：添加一个事件，关闭后将其删除。表单按钮调用与closeButton相同的函数，但由于某种原因，该事件没有从closeButton中删除。

在此输入图像描述

const button = document.querySelector('.btn');


const container = document.querySelector(".container");

button.addEventListener('click', () => {
  container.style.display = "block"
  
  const closeButton = container.querySelector(".container__close");
  closeButton.addEventListener("click", close(container))
})


const form = container.querySelector("#form");
form.addEventListener('submit', close(container))


function close(elem) {
  const closeButton = elem.querySelector(".container__close");
 
  
  return function func (evt) {
    evt.preventDefault();
    
    elem.style.display = 'none';
    closeButton.removeEventListener('click', func);
  }
}
.btn {
  margin-block-end: 15px;
}

.container {
  display: none;
  inline-size: 500px;
  padding: 15px;
  border: 5px black solid;
}

.container__close {
  inline-size: 100px;
  margin-block-end: 15px;
}
  <button class="btn">Click</button>
  <div class="container" >
      <button type="button" class="container__close">X</button>
      <form id="form">
        <input type="text" placeholder="Имя" required>
        <input type="text" name="description" placeholder="Фамилия" >
        <button type="submit" class="button">Сохранить</button>
      </form>
    </div>

javascript

1 个回答

  1. Best Answer

    该函数在调用时close返回一个新函数。

    closeButton当您单击该按钮时，将向该按钮添加一个处理程序button。

    通话中

    form.addEventListener('submit', close(container))

    内部创建的新函数close被添加为表单事件处理程序。它与添加到关闭按钮的处理程序无关。

    因此，当您尝试删除处理程序时，会检查该按钮是否没有这样的处理程序 - 因此什么也不会发生。

    要解决这个问题，您可以简单地将创建的函数保存到变量中：

    const button = document.querySelector('.btn');


const container = document.querySelector(".container");

const closeHandler = close(container);
button.addEventListener('click', () => {
  container.style.display = "block"

  const closeButton = container.querySelector(".container__close");
  closeButton.addEventListener("click", closeHandler)
})


const form = container.querySelector("#form");
form.addEventListener('submit', closeHandler)


function close(elem) {
  const closeButton = elem.querySelector(".container__close");


  return function func(evt) {
    evt.preventDefault();

    elem.style.display = 'none';
    closeButton.removeEventListener('click', func);
  }
}
    .btn {
  margin-block-end: 15px;
}

.container {
  display: none;
  inline-size: 500px;
  padding: 15px;
  border: 5px black solid;
}

.container__close {
  inline-size: 100px;
  margin-block-end: 15px;
}
    <button class="btn">Click</button>
<div class="container">
  <button type="button" class="container__close">X</button>
  <form id="form">
    <input type="text" placeholder="Имя" required>
    <input type="text" name="description" placeholder="Фамилия" >
    <button type="submit" class="button">Сохранить</button>
  </form>
</div>

    • 4

相关问题