Tengo el siguiente marcado en la página
<div id="box"> <div id="box_child_one"></div> <div id="box_child_two"></div> <div id="box_child_three"></div> </div>Necesito activar el evento onmousedown en todos los elementos dentro del div #box , así que tengo este código javascript:
var element = "#box"; document.querySelector(element).onmousedown = function() { alert("triggered"); };Sin embargo, no quiero que se active onmousedown en el elemento #box_child_tres . ¿Cómo puedo conseguir esto?
Gracias.
Compruebe event.target para averiguar en qué elemento se hizo clic realmente.
var element = "#box"; document.querySelector(element).onmousedown = function(e) { if (e.target.id !== "box_child_three") { alert("triggered"); } }; <div id="box"> <div id="box_child_one">one</div> <div id="box_child_two">two</div> <div id="box_child_three">three</div> </div>Debe detener la stopPropagation del evento cuando se hace clic en el elemento tres para que no aparezca en el elemento principal ( box ).
document.getElementById('box').addEventListener('click', () => alert('triggered') ); document.getElementById('box_child_three').addEventListener('click', e => e.stopPropagation() ); <div id="box"> <div id="box_child_one">one</div> <div id="box_child_two">two</div> <div id="box_child_three">three</div> </div><div id="box"> <div id="box_child_one" trigger></div> <div id="box_child_two" trigger></div> <div id="box_child_three"></div> </div> <script> document.querySelector('#box').onclick = function(e){ if(e.target.hasAttribute('trigger')){ alert('event fired') } } </script>Iría por esto. Como ahora ya no depende de una identificación para llevar a cabo esto, lo que lo hace más reutilizable