Javascript 在可点击的div中创建按钮

我有可点击的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.< /p> ，可以使用<代码>文档创建元素：CytElement（TAGNITY），然后使用<代码>元素.AppEdfStand（元素）< /C> >将它们插入文档中。

额外好处：如果满足您的需要，您可以使用

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

---

编辑：如评论中所述，默认情况下会出现事件气泡，您可以了解更多有关它的信息

默认情况下的事件气泡。因此，如果在一个div中包含一个按钮，它将冒泡到父div并触发处理程序。因此，无需做任何额外的事情，只需在div内制作一个按钮。但我不知道为什么你会想要一个可点击的div，以及它内的一个按钮。你想让按钮点击做一些与div点击不同的事情吗？@DipeshTimilsina在创建todo应用程序时，我有任务列表，点击任务展开更多详细信息，在这个任务上，我需要像复选框这样的按钮，使任务完成，编辑按钮或删除任务。