为什么当我使用 addEventListener 时复选框停止工作

Question

when ever i use addEventListener my check box stops working i tried removing every code but when i add this code my checkbox stops working this is my event listener

document.addEventListener('click', function(e) {
  e.preventDefault();
});

my document has innerhtml before it and i wanted to get the selected items id this is the innerhtml

document.innerHTML += "<div class='product-container'><div class='course'><div class='course-preview'><img class='product-image' src="+productimageUrl+"></div><div class='course-info'><div class='progress-container'><h6>OnSale: "+ productsale +"</h6><h6>Featured: "+productfeatured +"</h6><h6>soldOut: "+ productsoldout +"</h6></div><h2>"+ productname +" "+ productprice +" </h2><h4>"+productcategory+", "+productsubcategory+"</h6><h4>"+ productamount +"</h4><h6>PRODUCT ID:</h6><h5>"+ productid +"</h5><button id='editbutton' class='btn'>Edit Product</button></div></div></div>"    

whenever i use this code this code it stops working in case you want document this is my document

const document = document.getElementById("main-page");

Answer 1

e.preventDefault(); prevents any action that would've taken place when clicking.

If you want to preventDefault() only when you're not clicking on a checkbox, test if the target object is or not an input.

document.addEventListener('click', function(e) {
  if(e.target.tagName != "INPUT") {
    e.preventDefault();
  }
});