我正在尝试用纯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>
把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>
以下事件处理程序捕获对正文的所有单击:
document.body.addEventListener('click', deleteTask);
因此,当您在deleteTask
函数中阻止单击时的默认行为时,您也会阻止其他按钮(包括"添加任务"按钮(的默认操作。
鉴于您已经检查了点击的目标,您也应该只阻止在这种情况下的默认点击操作:
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>