Tengo dos divs apilados juntos y uno está detrás del otro.
<div style='position:relative;'> <div style='position: absolute; top:0; left:0;'> bottom element </div> <div style='position: absolute; top:0; left:0;'> top element </div> </div> Instalé un detector de clics en ambos elementos. Sin embargo, solo el superior obtiene el evento. Algunas otras publicaciones sugieren que puedo usar pointer-event:none para dejar de manejar el evento de clic desde el elemento superior. Sin embargo, quiero manejar los eventos de clic en ambos elementos.
Me encantaría ver su código JavaScript, pero sin embargo, puede usar la propiedad z-index con la declaración condicional para esto. También tenga en cuenta que el contenedor para ambos divs debe ser el que recibe el evento mientras los divs responden al evento.
//estilo
.inner_div{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; }//HTML
<div style="position: relative; width: 100px; height: 100px" onclick="myChange(document.querySelector('#one'))"> <div class="inner_div" id="one" style="background: red">div 1</div> <div class="inner_div" id="two" style="background: green">div 2</div> </div>//Js
function myChange(x){ if (x.style.zIndex == "1") { x.style.zIndex = "-1" }else{ x.style.zIndex = "1" } }