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功能中阻止单击时的默认行为时，您也会阻止对其他按钮执行默认操作，包括＆＃34;添加任务＆＃34;按钮。

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

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

＆＃13;

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();
  }
  //
}

＆＃13;

<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>

＆＃13;

Javascript-事件不适用于其他事件

2 个答案: