Javascript- 活动不能与其他活动一起使用

Question

我正在尝试使用纯 javascript 开发 "todo" 应用程序。我创建了一个 "newTask" 事件，它也有效，之后我创建了 deleteTask 事件并且它也有效。但我意识到我无法使用 deleteTask 事件代码创建新任务，如果我删除 deleteTask 代码，它会再次运行吗？

我这里的错误是什么？

const task = document.querySelector('#task');
const form = document.querySelector('#task-form');
const ul = document.querySelector('ul');

form.addEventListener('submit', newTask);

document.body.addEventListener('click', deleteTask);

function newTask(e) {
  if (task.value) {
    let li = document.createElement('li');
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task.value));
    let href = document.createElement('a');
    href.className = "delete-item secondary-content";
    href.innerHTML = '<i class="fa fa-remove"></i>';
    href.setAttribute('href', '#');
    li.appendChild(href);
    ul.appendChild(li);
  } else {
    alert('Please type something');
  }
  e.preventDefault();
  form.reset();
}

function deleteTask(e) {
  if (e.target.classList.contains('fa-remove')) {
    e.target.parentElement.parentElement.remove();
  }
  e.preventDefault();
}

<body>
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div id="main" class="card">
          <div class="card-content">
            <span class="card-title">Task List</span>
            <div class="row">
              <p style="background-color:red;color:white;text-align:center" id="error"></p>
              <form id="task-form">
                <div class="input-field col s12">
                  <input type="text" name="task" id="task">
                  <label for="task">New Task</label>
                </div>
            </div>
            <input type="submit" value="Add Task" class="btn">
            </form>
          </div>
          <div class="card-action">
            <h5 id="task-title">Tasks</h5>
            <ul class="collection">
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
            <button class="btn black" id="clear-tasks">Clear Tasks</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

把e.preventDefault()放在if里面。否则，它会阻止 click 事件传播到其他元素。

我知道你说你试过了，但它在这里有效。

const task = document.querySelector('#task');
const form = document.querySelector('#task-form');
const ul = document.querySelector('ul');

form.addEventListener('submit', newTask);

document.body.addEventListener('click', deleteTask);

function newTask(e) {
  if (task.value) {
    let li = document.createElement('li');
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task.value));
    let href = document.createElement('a');
    href.className = "delete-item secondary-content";
    href.innerHTML = '<i class="fa fa-remove">X</i>';
    href.setAttribute('href', '#');
    li.appendChild(href);
    ul.appendChild(li);
  } else {
    alert('Please type something');
  }
  e.preventDefault();
  form.reset();
}

function deleteTask(e) {
  if (e.target.classList.contains('fa-remove')) {
    e.target.parentElement.parentElement.remove();
    e.preventDefault();
  }

}

<div class="container">
  <div class="row">
    <div class="col s12">
      <div id="main" class="card">
        <div class="card-content">
          <span class="card-title">Task List</span>
          <div class="row">
            <p style="background-color:red;color:white;text-align:center" id="error"></p>
            <form id="task-form">
              <div class="input-field col s12">
                <input type="text" name="task" id="task">
                <label for="task">New Task</label>
              </div>
          </div>
          <input type="submit" value="Add Task" class="btn">
          </form>
        </div>
        <div class="card-action">
          <h5 id="task-title">Tasks</h5>
          <ul class="collection">
            <li class="collection-item">
              List Item
              <a href="#" class="delete-item secondary-content">
                <i class="fa fa-remove"></i>
              </a>
            </li>
            <li class="collection-item">
              List Item
              <a href="#" class="delete-item secondary-content">
                <i class="fa fa-remove"></i>
              </a>
            </li>
            <li class="collection-item">
              List Item
              <a href="#" class="delete-item secondary-content">
                <i class="fa fa-remove"></i>
              </a>
            </li>
            <li class="collection-item">
              List Item
              <a href="#" class="delete-item secondary-content">
                <i class="fa fa-remove"></i>
              </a>
            </li>
            <li class="collection-item">
              List Item
              <a href="#" class="delete-item secondary-content">
                <i class="fa fa-remove"></i>
              </a>
            </li>
          </ul>
          <button class="btn black" id="clear-tasks">Clear Tasks</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

以下事件处理程序捕获所有正文点击：

document.body.addEventListener('click', deleteTask);

因此，当您在 deleteTask 函数中阻止点击时的默认行为时，您也会阻止其他按钮的默认行为，包括 "add task" 按钮。

鉴于您已经检查了点击的目标，您还应该仅阻止该情况下的默认点击操作：

function deleteTask(e) {
  if (e.target.classList.contains('fa-remove')) {
    e.target.parentElement.parentElement.remove();
    e.preventDefault(); // Move preventDefault here
  }
}

const task = document.querySelector('#task');
const form = document.querySelector('#task-form');
const ul = document.querySelector('ul');

form.addEventListener('submit', newTask);

document.body.addEventListener('click', deleteTask);

function newTask(e) {
  if (task.value) {
    let li = document.createElement('li');
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task.value));
    let href = document.createElement('a');
    href.className = "delete-item secondary-content";
    href.innerHTML = '<i class="fa fa-remove"></i>';
    href.setAttribute('href', '#');
    li.appendChild(href);
    ul.appendChild(li);
  } else {
    alert('Please type something');
  }
  e.preventDefault();
  form.reset();
}

function deleteTask(e) {
  if (e.target.classList.contains('fa-remove')) {
    e.target.parentElement.parentElement.remove();
    e.preventDefault();
  }
  //
}

<body>
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div id="main" class="card">
          <div class="card-content">
            <span class="card-title">Task List</span>
            <div class="row">
              <p style="background-color:red;color:white;text-align:center" id="error"></p>
              <form id="task-form">
                <div class="input-field col s12">
                  <input type="text" name="task" id="task">
                  <label for="task">New Task</label>
                </div>
            <input type="submit" value="Add Task" class="btn">
            </form>
          </div>
          <div class="card-action">
            <h5 id="task-title">Tasks</h5>
            <ul class="collection">
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                List Item
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
            <button class="btn black" id="clear-tasks">Clear Tasks</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Javascript- 活动不能与其他活动一起使用

Javascript- Event dosen't work with the other event

javascript

events

addeventlistener

preventdefault