[英]Javascript- Event dosen't work with the other event
我正在尝试使用纯JavaScript来做“待办事项”应用。 我创建了一个“ 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>
Javascript-Click事件不适用于动态添加的元素
[英]Javascript - Click event dosen't work on dynamically added elements
搜索框mouseenter和mouseover事件不适用于scrollTop事件
[英]Search Box mouseenter and mouseover events dosen't work with scrollTop event
HTML / javascript-字符串追加变量以绑定onclick按钮事件
[英]HTML/javascript- string append with variable to bind onclick button event
Javascript-从函数变量向事件侦听器分配元素id
[英]Javascript- Assign element id to event listener from function variable
Javascript- 在事件侦听器中立即调用 function 表达式
[英]Javascript- Immediately-invoked function expressions in an event listener
Javascript-将click事件添加到动态生成的表格单元格
[英]Javascript- Adding click event to dynamically generated cell of table
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.