Tengo un div que contiene un menú desplegable con varias casillas de verificación.

Tengo estos dos detectores de eventos:

 widget.addEventListener("click", function (ev) { if (checkboxes.style.display === "none") { checkboxes.style.display = "block"; } else { checkboxes.style.display = "none"; //hide the dropdown } ev.preventDefault(); ev.stopPropagation(); }); window.addEventListener("click", function (ev) { if (checkboxes.style.display === "block") { checkboxes.style.display = "none"; } ev.preventDefault(); });

Estos dos funcionan. Cuando hago clic en el widget desplegable, el menú desplegable se abre y se cierra como se esperaba.

El segundo evento también funciona. Cuando hago clic en cualquier lugar de la ventana, el menú desplegable si está abierto se cierra. La cuestión es que este menú desplegable tiene casillas de verificación, por lo que una casilla de verificación también es parte de la ventana. Cuando hago clic en una casilla de verificación para marcarla, el menú desplegable se cierra en lugar de darle al usuario la posibilidad de seleccionar una o más casillas de verificación y luego se cierra.

Entonces, la solución es definitivamente en lugar de window.addEventListener para hacer window (excepto div desplegable).addEventListener. Conozco el nombre de identificación del div desplegable para poder obtenerlo, pero lo que no sé es cómo crear un detector de eventos para eso sin el menú desplegable.

PD: en el código, las casillas de verificación son solo el menú desplegable y el widget es el ícono del widget desplegable.