Веб-страница TodoList, лучший слушатель событий, чем mouseovert / out? почему мой псевдоэлемент :: первая буква не работает?

Question

Здравствуйте, и спасибо, что заглянули.

У меня есть одна главная проблема с моим приложением. Я думаю, что слушатели событий mouseout и mouseover стреляют как сумасшедшие, когда я наводю курсор на значок мусорной корзины, и я не знаю почему. Это становится все глючным и не может нажать на него правильно. Любой совет?

https://codepen.io/Dali213/pen/ExjLMdG?editors=0110

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

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

function removeTrashCan() {
    const trashCan = this.querySelector("i");
    trashCan.removeEventListener("click", del);
    trashCan.remove();
}

Второй вопрос, сначала мой псевдоэлемент :: first-letter работал правильно, теперь это не так. Когда я смотрю на стили, применяемые с помощью инструмента developper, он все еще кажется применимым, хотя ... Почему?

Любые советы по моему коду приветствуются.

Спасибо за ваше время.

Answer 1

Вы можете добавить в начале tra sh банку и отобразить / скрыть на основе 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;
}