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

hrirmatl 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(196)

我有一个可点击的div，由addEventListener在element上创建：

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。

JavaScript

来源：https://stackoverflow.com/questions/65943913/create-buttons-inside-clickable-div

2条答案

按热度按时间

rfbsl7qr1#

您可以使用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);
        });
    })
}

编辑：正如评论中所说，事件默认冒泡，你可以了解更多关于它的here

赞(0）回复(0）举报 2023-06-28

ohfgkhjo2#

而不是把它放在可点击的div中。如注解中所述，默认情况下父事件会冒泡。尝试将这两个按钮作为子按钮放置在另一个不可单击的div中，这样父事件就不会冒泡到您的按钮中。

赞(0）回复(0）举报 2023-06-28