Tengo un problema con Modal . Cuando hice clic fuera de eso, funciona (eliminar clase), pero cuando hago clic en Modal , también funciona. Necesito cuando hago clic en eso, la clase no tiene que eliminar. Por ejemplo, si hice clic .little-inputs en el modal, también funciona.

Los lugares que obtuve en el círculo rojo están funcionando. También en verde.

HTML

 <div class="detailed-search"> <input readonly type="text" placeholder="Ətraflı axtarış" class="textBox"/> <div class="search-options"> <div class="detail-search-form"> <label for="floorMin">Mərtəbə</label> <div class="little-inputs"> <div class="form-input"> .......... </div> </div>

JS

 const detailSearch = document.querySelector(".detailed-search"); const searchOptions = document.querySelector(".search-options"); const textbox = document.querySelector(".textBox"); const detailForm = document.querySelector(".detail-search-form"); detailSearch.addEventListener("click", () => { searchOptions.classList.toggle("detailed-search-active") }); window.addEventListener("click", (e) => { if (e.target == searchOptions || e.target == detailSearch || e.target == textbox || e.target == detailForm) { searchOptions.classList.add("detailed-search-active"); } else { searchOptions.classList.remove("detailed-search-active"); }; });