TodoList 网页，比 mouseovert/out 更好的事件监听器？

Question

我的应用程序有一个主要问题。我认为当我将光标放在垃圾桶图标上时，鼠标悬停和鼠标悬停事件侦听器会疯狂地触发，但我不知道为什么。它变得非常糟糕并且无法正确点击它。有什么建议吗？https://codepen.io/Dali213/pen/ExjLMdG?editors=0110const ul = document.querySelector("ul");//initialisationconst arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];for (let i = 0; i < arr.length; i++) {  addToDo(arr[i]);}function addToDo(text) {  const li = document.createElement("li");  const p = document.createElement("p");  p.textContent = text;  li.append(p);  li.addEventListener("click", lineThrough);  li.addEventListener("mouseover", addTrashCan);  li.addEventListener("mouseout", removeTrashCan);  ul.append(li);}//add rubish icon+delete functionfunction del() {  const li = this.closest("li");  li.removeEventListener("click", lineThrough);  li.removeEventListener("mouseover", addTrashCan);  li.removeEventListener("mouseout", removeTrashCan);  li.remove();}function addTrashCan() {  const trashCan = document.createElement("i");  trashCan.classList.add("far", "fa-trash-alt", "trash-can");  trashCan.addEventListener("click", del);  this.prepend(trashCan);}function removeTrashCan() {    const trashCan = this.querySelector("i");    trashCan.removeEventListener("click", del);    trashCan.remove();}第二个问题，起初我的伪元素 ::first-letter 工作正常，但现在不行。当我查看使用开发工具应用的样式时，它似乎仍然应用......为什么？非常欢迎对我的代码提出任何建议。

Answer 1

您可以在开头添加垃圾桶，并根据事件显示/隐藏，mouseout而mouseover不是每次都创建元素：

.hidden {

  display: none !important;

}

function addTrashCan() {

  this.querySelector('i').classList.remove('hidden')

}

function removeTrashCan() {

  this.querySelector('i').classList.add('hidden')

}

function addToDo(text) {

  const li = document.createElement("li");

  const p = document.createElement("p");

  const trashCan = document.createElement("i");

  trashCan.classList.add("far", "fa-trash-alt", "trash-can", "hidden");

  trashCan.addEventListener("click", del);

  li.prepend(trashCan);

  p.textContent = text;

  li.append(p);

  li.addEventListener("click", lineThrough);

  li.addEventListener("mouseover", addTrashCan);

  li.addEventListener("mouseout", removeTrashCan);

  ul.append(li);

}

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

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

//initialisation

const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];

for (let i = 0; i < arr.length; i++) {

  addToDo(arr[i]);

}

function addToDo(text) {

  const li = document.createElement("li");

  const p = document.createElement("p");

  const trashCan = document.createElement("i");

  trashCan.classList.add("far", "fa-trash-alt", "trash-can", 'hidden');

  trashCan.addEventListener("click", del);

  li.prepend(trashCan);

  p.textContent = text;

  li.append(p);

  li.addEventListener("click", lineThrough);

  li.addEventListener("mouseover", addTrashCan);

  li.addEventListener("mouseout", removeTrashCan);

  ul.append(li);

}

//hide the input

function hideInput() {

  input.classList.toggle("hidden");

}

//add task to the list

function enter() {

  if (event.keyCode === 13) addToDo(this.value);

}

//line-through on click

function lineThrough() {

  this.querySelector("p").classList.toggle("line-through");

}

//add rubish icon+delete function

function del() {

  const li = this.closest("li");

  li.removeEventListener("click", lineThrough);

  li.removeEventListener("mouseover", addTrashCan);

  li.removeEventListener("mouseout", removeTrashCan);

  li.remove();

}

function addTrashCan() {

  /*const trashCan = document.createElement("i");

  trashCan.classList.add("far", "fa-trash-alt", "trash-can");

  trashCan.addEventListener("click", del);

  this.prepend(trashCan);*/

  console.log('in');

  this.querySelector('i').classList.remove('hidden')

}

function removeTrashCan() {

  /*const trashCan = this.querySelector("i");

  trashCan.removeEventListener("click", del);

  trashCan.remove();*/

  console.log('out');

  this.querySelector('i').classList.add('hidden')

}

//listeners

document.querySelector(".display").onclick = hideInput;

input.onkeyup = enter;

* {

  padding: 0px;

  margin: 0px;

}

body {

  background: linear-gradient(90deg, #18b7e4, #e8e9be);

}

.container {

  background-color: aliceblue;

  min-width: 270px;

  max-width: 270px;

  margin: 80px auto 0px;

}

.head {

  padding: 5px 10px;

  display: flex;

  justify-content: space-between;

  background-color: #2072b5;

  color: #ffffff;

}

.display,

i {

  cursor: pointer;

}

input {

  border: 2px solid #2072b5;

  width: 246px;

  padding: 5px 10px;

}

.hidden {

  display: none !important;

}

ul {

  list-style: none;

}

p {

  display: inline;

  padding: 2px 5px;

}

p::first-letter {

  text-transform: capitalize;

}

li:nth-of-type(odd) {

  background-color: #f7f5f7;

}

li:nth-of-type(even) {

  background-color: #ffffff;

}

.line-through {

  text-decoration: line-through;

  opacity: 0.7;

}

.trash-can {

  background-color: red;

  color: #ffffff;

  padding: 2px 5px;

}

li {

  display: flex;

}

<!DOCTYPE html>

<html>

<head>

  <title>to-do list</title>

  <link rel="stylesheet" href="main.css" />

  <script src="https://kit.fontawesome.com/fe178342de.js" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container">

    <div class="head">

      <h1>TO-DO LIST</h1>

      <h1 class="display">+</h1>

    </div>

    <input type="text" placeholder="Add New Todo" />

    <ul></ul>

  </div>

  <script src="main.js"></script>

</body>

</html>

编辑：要修复::first-letter伪元素，您可以添加以下 css：

li {

  display: flex;

}