<div> <div class="child-1">Clickable child</div> <div class="child-2">Non-clickable child</div> </div>Digamos que se puede hacer clic en child-1, y child-1 es un tercer elemento de biblioteca, por lo que no puedo cambiarlo. En este momento, el área en la que se puede hacer clic es solo child-1. ¿Cómo puedo activar el clic del niño 1 cuando hago clic en el niño 2?
Agregue el oyente onclick al padre de child-1 y child-2 . De esa manera, el evento se propaga al div principal y puede actuar en consecuencia.
Usando event.target puede identificar dónde ocurrió el clic real (entre child-1 y child-2 )
<div id="wrapper"> <div class="child-1">Clickable child</div> <div class="child-2">Non-clickable child</div> </div>JS:
const wrapper = document.getElementById('wrapper'); wrapper.addEventListener('click', (event) => { ... });Puede agregar un detector de eventos de clic a click2 y luego hacer que active un clic en el elemento click1.
const child1 = document.querySelector('.child-1'); const child2 = document.querySelector('.child-2'); child2.addEventListener('click', function() { alert('child2 clicked'); child1.click(); }); child1.addEventListener('click', function() { alert('child1 clicked'); }); <div> <div class="child-1">Clickable child</div> <div class="child-2">Non-clickable child</div> </div>