0
122
ViewsCómo reenviar un evento específico a un elemento DOM superpuesto
Tengo dos divs completamente superpuestos; La capa superior tiene un comportamiento de desplazamiento porque tiene contenido desbordado y quiero mantener el comportamiento de desplazamiento.
La capa subyacente tiene una sección diferente con un controlador de clic diferente; casillas (X, Y, Z) en la imagen.
¿Cómo tengo un controlador de clics para la capa subyacente mientras mantengo el desplazamiento en la capa superior?
He probado
pointer-events: none;pero reenvía todos los eventos, lo que hace que se deshabilite el desplazamiento en la capa superior.Intenté
dispatchEventeventos manualmente usando javascript, pero el abastecimiento de eventos no funciona con normalidad.
Aquí está la estructura DOM
<div> <div ref="layer2" class=" layer2 h-96 cursor-pointer text-2xl text-center flex space-x-4 items-center justify-center bg-green-400 " style="width: 600px" @click="handleLayer2" > <div @click="handleSection('x')" class="w-[200px] h-[8rem] bg-red-600 shadow-lg rounded h-24" > X </div> <div @click="handleSection('y')" class="w-[200px] h-[8rem] bg-red-600 shadow-lg rounded h-24" > Y </div> <div @click="handleSection('z')" class="w-[200px] h-[8rem] bg-red-600 shadow-lg rounded h-24" > Z </div> </div> <div class=" layer1 absolute top-0 left-0 bg-pink-500 h-96 text-xl whitespace-nowrap text-center opacity-70 overflow-scroll pt-64 " style="width: 600px" @click="handleLayer1" > really long content ... </div>Aquí hay una reproducción completahttps://stackblitz.com/edit/vitejs-vite-dtxxqa?file=src/App.vue
1 answers
Answer question0
Para facilitar mi explicación, tendré que dar nombres a cada uno de los divs. Llamemos al div absolutamente posicionado topDiv y a los divs debajo downDivs .
También necesitará un controlador de clics en topDiv . Ese controlador es lo que usaremos para "reenviar" el evento a downDivs .
En su controlador de clic topDiv , haría algo como esto:
// first hide the `topDiv` event.target.hidden = true; // Get the element underneath that also falls under the click location let downDiv = document.elementFromPoint(event.clientX, event.clientY); // Unhide the topDiv event.target.hidden = false; // We still need to confirm that the element gotten is actually a downDiv if (!downDiv.classList.includes('down-div')) return; // Now we can dispatch a duplicate click event on the downDiv downDiv.dispatchEvent(new MouseEvent('click', { bubbles: true, pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY, })); // Now you can handle the clicks on the downDiv anyway you like :)Puede leer este artículo para obtener más información sobre el envío de eventos.