在可点击的div中创建按钮

Question

我有一个可点击的div，由addEventListener在元素:

function expandTask() {
const allTasks = document.querySelectorAll('.task-item');
allTasks.forEach((task) => {
task.addEventListener("click", () => {
if(!task.classList.contains('active')){
task.classList.add('active');
} else {
task.classList.remove('active')
}
})
})
}

和我想把一些按钮在这个可点击的div，我怎么能使这个工作?

当我点击按钮时，它仍然认为这是点击父div。

Answer 1

您可以使用document.createElement(tagName)动态创建元素，然后使用element.appendChild(element)将它们插入到文档中。

奖励:如果适合您的需要，您可以使用classList.toggle(className)。

function expandTask() {
const allTasks = document.querySelectorAll('.task-item');
allTasks.forEach((task) => {
task.addEventListener("click", () => {
task.classList.toggle('active');
let newDiv = document.createElement("DIV");
newDiv.innerHTML = "Some text you want to add";
task.appendChild(newDiv);
});
})
}

编辑:正如评论中所说，事件默认弹出，你可以在这里了解更多关于它的信息