[英]Create buttons inside clickable div
I have clickable div, made by addEventListener on element:我有可点击的 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')
}
})
})
}
and I would like to put some buttons inside this clickable div, how can i make this work?我想在这个可点击的 div 中放置一些按钮,我怎样才能让它工作?
When i click on button, it still consider this as click on parent div.当我点击按钮时,它仍然认为这是点击父 div。
You can create elements dinamycally using document.createElement(tagName)
and then use element.appendChild(element)
to insert them in the document.您可以使用
document.createElement(tagName)
动态地创建元素,然后使用element.appendChild(element)
将它们插入到文档中。
Bonus: you can use classList.toggle(className)
if that suits your needs.奖励:如果适合您的需要,您可以使用
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);
});
})
}
Edit: As said in the comments, the event bubbles up by default, you can understand more about it here编辑:如评论中所述,事件默认冒泡,您可以在此处了解更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.