Tengo un componente que tiene marcadores en él. El marcador es un div con estilo con un icono. Los marcadores tienen eventos de clic, mouseenter y mouseleave. Cuando el mouse ingresa, aparece información sobre herramientas. Encima de los marcadores puedo colocar otro elemento para cubrirlos. Ese elemento tiene un índice z más alto. Todavía quiero poder pasar el mouse sobre (mouseenter, mouseleave) sobre elementos de índice z inferiores (marcadores) mientras evito el evento de clic en ellos cuando están cubiertos. ¿Hay alguna solución para pasar solo algunos o excluir solo algunos eventos de la propagación en un elemento de índice z más alto?
<!DOCTYPE html> <style> #elmHigherZindexID { width: 100px; height: 100px; position: absolute; background-color: chartreuse; z-index: 1000; } #elmLowerZindexID { width: 100px; height: 100px; position: absolute; background-color: cornflowerblue } </style> <body> <div id="elmHigherZindexID">HIGH</div> <div id="elmLowerZindexID">LOW</div> </body> <script> let highElmRef = document.getElementById('elmHigherZindexID'); let lowElmRef = document.getElementById('elmLowerZindexID'); highElmRef.addEventListener('click', highEventHandler); highElmRef.addEventListener('mouseenter', highOtherEventHandler); lowElmRef.addEventListener('mouseenter', lowEventHandler); function highEventHandler(event) { event.stopPropagation(); console.log('high', event); } function highOtherEventHandler(event) { event.stopPropagation(); console.log('high', event); const cusEvent = new MouseEvent('mouseenter', { view: window, bubbles: true, cancelable: true }); lowElmRef.dispatchEvent(cusEvent); } function lowEventHandler(event) { event.stopPropagation(); console.log('low', event); } </script> </html>