Quiero que cuando haga clic fuera de Mi DIV con el ID Container_ID , todo el Contenedor se oculte a través display: none; . El código que presento en JavaScript funciona hasta cierto punto, porque cuando hago clic dentro de cualquier parte de Container_ID , devuelve el mismo comportamiento, My DIV se oculta. Y no se suponía que cuando interactuaba con los elementos Controls_CLASS + ul,li + Checkbox_CLASS dentro del mismo Container_ID . Deben excluirse de ocultar todo el Container_ID cuando hago clic en ellos, porque están dentro.
¿Cómo puedo mejorar esto?
JavaScript (fuente: https://codepen.io/marizawi/pen/YgaaMp )
window.addEventListener('mouseup', function(event) { var cont = document.getElementById('Container_ID'); if (event.target != cont && event.target.parentNode != cont) { cont.style.display = 'none'; } }); div.Container_CLASS { width: 50%; height: 350px; margin-top: 4px; margin-left: 4px; display: block; position: absolute; overflow-y: scroll; } <div class="Container_CLASS" id="Container_ID"> <div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>Aquí hay algunas opciones que podría usar
El mejor IMO es el evento de salida del mouse
document.getElementById("Container_ID").addEventListener('mouseleave',function(event){ document.getElementById("Container_ID").style.display = "none"; }); document.getElementById("Container_ID").addEventListener('focusout',function(event){ document.getElementById("Container_ID").style.display = "none"; });Esto es lo que haría.
Simplemente verifique si el elemento en el que se hizo clic ( event.target ) está en el contenedor, o si event.target es el elemento que muestra el contenedor.
const theDiv = document.getElementById('theDiv'); const theButton = document.getElementById('theButton'); document.addEventListener('click', function(event) { if (theDiv.contains(event.target) || event.target.id === 'theButton') return; theDiv.hidden = true; }) div { background-color: red; height: 400px; width: 400px; } <button type="button" onclick="this.nextElementSibling.hidden=false" id="theButton">Show</button> <div hidden id="theDiv"> <button>clicking here won't close</button> </div>Para tu ejemplo:
const container = document.getElementById('Container_ID'); document.addEventListener('click', function(event) { if (container.contains(event.target)) return; container.hidden = true; }) div.Container_CLASS { border: 1px solid red; width: 50%; height: 350px; margin-top: 4px; margin-left: 4px; position: absolute; overflow-y: scroll; } <div class="Container_CLASS" id="Container_ID"> <div class="Controls_CLASS"><a href="javascript:void(0)">Select All</a>|<a href="javascript:void(0)">Reset</a></div> <ul> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li> <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li> </ul> </div>