Tengo un div con varios elementos. Quiero hacer un evento para manejar hacer clic en cualquier elemento de este div, EXCEPTO uno específico.
<div id="mydiv"> <img id="myimage" src="myimage.gif"/> <img id="myimage2" src="myimage2.gif"/> <img id="myimage3" src="myimage3.gif"/> </div> <script> document.getElementById('mydiv').addEventListener('click', function() { // if element is not the one with id=myimage3 do something alert('You clicked on image1 or image2'); }); </script>Use el parámetro de event para la devolución de llamada y verifique que su atributo de id de objetivos no sea myimage3 :
document.getElementById('mydiv').addEventListener('click', function(e) { if (e.target.id != 'myimage3') alert('You clicked on image1 or image2'); }); <div id="mydiv"> <img id="myimage" src="https://via.placeholder.com/100?text=image1" /> <img id="myimage2" src="https://via.placeholder.com/100?text=image2" /> <img id="myimage3" src="https://via.placeholder.com/100?text=image3" /> </div>Los elementos en HTML se pueden identificar de diferentes maneras: por class y por id . Class son colecciones de elementos que se pueden seleccionar, diseñar y manipular, mientras que los id son únicos y deben ser específicos de un solo elemento. Dado que desea excluir un elemento específico de la selección, deberá comparar la identificación del elemento seleccionado con la del que desea excluir.
Esto se puede hacer con una devolución de llamada como en la respuesta de @Nick usando la propiedad event.target .
Esencialmente, lo que hace e.target es obtener el elemento que desencadenó el evento y todos sus diversos atributos, por ejemplo. nombre de tagName y style .
Pase 'evento' como argumento a la función de devolución de llamada.
Envuelva la alerta en una declaración if verificando si el
event.target.id !== 'myimage3'