如何使按钮内的图标像按钮一样工作（指针事件：无；不起作用）
Posted
技术标签:
【中文标题】如何使按钮内的图标像按钮一样工作（指针事件：无；不起作用）【英文标题】：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 我解决了您的问题并添加了更新的答案。你可以检查一下。
【参考方案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) 你看到了什么？以上是关于如何使按钮内的图标像按钮一样工作（指针事件：无；不起作用）的主要内容，如果未能解决你的问题，请参考以下文章