如何使按钮内的图标像按钮一样工作（指针事件：无；不起作用）答案

【问题标题】：how to make icon within button work like the button ( pointer events: none; doesn't work)如何使按钮内的图标像按钮一样工作（指针事件：无；不起作用）
【发布时间】：2020-05-25 15:13:40
【问题描述】：

这是一个在单击按钮时应该删除的 todolist。它里面有一个图标。单击按钮时它会删除，但单击图标时没有任何反应。我尝试将 (!important) 添加到指针事件，但它不会让图标具有父级的功能。

添加了更多细节

    <script>
        //selectors
        const todoInput = document.querySelector(".todo-input");
        const todoButton = document.querySelector(".todo-button");
        const todoList = document.querySelector(".todo-list");

        //eventlistners
        todoButton.addEventListener("click", addTodo);
        todoList.addEventListener('click', deleteCheck);

        //functions
        function addTodo(event){
        //prevent form submit
        event.preventDefault();
        //TODO DIV 
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        //create li
        const newTodo = document.createElement('li');
        newTodo.innerText = todoInput.value;
        newTodo.classList.add('todo-item');
        todoDiv.appendChild(newTodo);
        //trash button
        const trashButton = document.createElement('button');
        trashButton.innerHTML = '<i class="fas fa-trash"></i>';  
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);
        //append to list
        todoList.appendChild(todoDiv);
        //clear 
        todoInput.value = "";
          }

          function deleteCheck(e) {
              console.log(e.target);
              const item = e.target;
              //DELETE TODO
              if (item.classList[0] === 'trash-btn') {
                  const todo = item.parentElement;
                  //animation
                  todo.classList.add("fall");
                  todo.addEventListener('transitionend', function(){                
                     todo.remove();
                  });
                }
          }
    </script>
THIS IS CSSSSSSSSSSSSSSSSSSSSSSSSSSS

 <style>
     
        body{
            color: whitesmoke;
   
        }


        header, form{
            min-height:20vh;
            display:flex;
            justify-content: center;
            align-items: center;

        }

        form input, form button{
            padding: 0.5rem;
            font-size: 2rem;
            border:none;
            background-color: whitesmoke;
        }
        
        form button{
            color: black;
            background: whitesmoke;
            cursor: pointer;
            transition: all 0.5s ease;
        }

        form button:hover{
            background: black;
            color: whitesmoke;
        }

    .todo-container{
            display:flex;
            justify-content: center;
            align-items:center;
        }      
    .todo-list{
        min-width: 30%;
        list-style: none;
        }
    .todo{
   
     background :whitesmoke;
     color:black;
     font-size: 1.5rem;
     display:flex;
     justify-content: space-between;
     align-items: center;
     transition: all 0.5 ease;
        }

    .todo li{
        flex: 1;

    }
    .trash-btn{
        background: red;
        color:whitesmoke;
        border: none;
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
    }
    .fa-trash{
        pointer-events: none ;
    }

    .fall{
        transform: translateY(8rem) rotateZ(20deg);
        opacity:0;
    }
   </style>

HTMLLLLLLLLLLLLLLLLLLLLLLLLLLLL  HERE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>everyday</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
 
   
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
   
    <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
    </head>
<body>

    <header>
        <h1> To do List</h1>
    </header>

    <form>
        <input type="text" class="todo-input">
        <button class="todo-button" type ="submit"><i class = "fas fa-plus-square"></i></button> 
        
    </form>

    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>
    </body>

【问题讨论】：

您不需要做任何特别的事情来使按钮内的图标可点击。我认为你并没有向我们展示一切。
你能创建一个工作的 sn-p 来向我们展示问题吗？
嗨 Ani，您能在此处包含 onClick 事件处理程序代码吗？单击按钮时触发的那段代码，我想它是定义item 的代码。看起来您有时选择了错误的元素来删除。
我已经编辑了这个问题。请帮我看看吧
@Ani 我解决了您的问题并添加了更新的答案。你可以检查一下。

标签： javascript html css pointer-events

【解决方案1】：

单击按钮时它会删除，但是当图标被单击时没有任何反应点击。

当您将事件处理程序附加到图标并阻止进一步传播时，可能会发生这种情况。

示例 sn-p

const todoList = [{
    id: 1,
    title: 'Task 1'
  },
  {
    id: 2,
    title: 'Task 2'
  },
  {
    id: 3,
    title: 'Task 3'
  }
]

const list = document.querySelector('#list');

const buttonClick = (event) => {
  console.log('button click');
}

const iconClick = (event) => {
  console.log('icon click');
  event.stopPropagation();
}


for (let todoItem of todoList) {
  const listItem = document.createElement('li');

  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';

  trashButton.addEventListener("click", buttonClick);
  listItem.appendChild(document.createTextNode(todoItem.title));
  listItem.appendChild(trashButton);

  list.appendChild(listItem);

}

setTimeout(() => {
  const icons = Array.from(list.querySelectorAll("svg"));

  for (const icon of icons) {
    icon.addEventListener("click", iconClick);
  }
}, 1000);

ul {
  list-style: none;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<ul id="list"></ul>

【讨论】：

【解决方案2】：

 const todo = item.parentElement;

这是错误的代码。让我想想。您创建了按钮，然后在其中放置了一个图标。然后，您将单击事件添加到此按钮。但是问题是当你点击这个按钮时，你要删除的元素就是这个按钮的父元素。图标的父元素已经是按钮本身。你明白吗？

更新：

我已在我的更改中添加了注释行并对其进行了解释。我希望这是可以理解的。祝你好运！

//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//eventlistners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);

//functions
function addTodo(event) {
  //prevent form submit
  event.preventDefault();
  //TODO DIV 
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  //create li
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);
  //trash button
  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class="fas fa-trash trash-btn"></i>'; // add trash-btn class here! 
  // trashButton.classList.add("trash-btn"); now instead of giving this class to the button itself, we can give directly to the icon.
  todoDiv.appendChild(trashButton);
  //append to list
  todoList.appendChild(todoDiv);
  //clear 
  todoInput.value = "";
}

function deleteCheck(e) {
  const item = e.target;
  //DELETE TODO
  if (item.classList[0] === 'trash-btn') {
    const todo = item.parentElement.parentElement; // Add one more parent element! 
    console.log(todo) // Look this carefully 
    // animation
    todo.classList.add("fall");
    todo.addEventListener('transitionend', function() {
      todo.remove();
    });
  }
}

body {
  color: whitesmoke;
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background-color: whitesmoke;
}

form button {
  color: black;
  background: whitesmoke;
  cursor: pointer;
  transition: all 0.5s ease;
}

form button:hover {
  background: black;
  color: whitesmoke;
}

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  min-width: 30%;
  list-style: none;
}

.todo {
  background: whitesmoke;
  color: black;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5 ease;
}

.todo li {
  flex: 1;
}

.trash-btn {
  color: red;
  border: none;
  padding: .4rem;
  cursor: pointer;
  font-size: 2rem;
}

.fa-trash {
  pointer-events: none;
}

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  display: none;
  /*  if you use opacity here, the Delete button will not work after a while. it makes more sense for the item to disappear completely using display none */
}

<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>

<header>
  <h1> To do List</h1>
</header>

<form>
  <input type="text" class="todo-input">
  <button class="todo-button" type="submit"><i class = "fas fa-plus-square"></i></button>

</form>

<div class="todo-container">
  <ul class="todo-list">
  </ul>
</div>

【讨论】：

哦，我明白你的意思，我们的目标是删除作为 todolist 项的按钮的 parentElement。这实际上是在单击按钮时发生的，但是当单击按钮内的图标时，什么也没有发生。请问我该怎么做才能纠正？
当然。您可以将他们的代码上传为 js fiddle 或代码 sn-p 这样就没有错误了吗？（包括 html）
和console.log (todo) 你看到了什么？