¿Cómo puedo permitir que un clic pase a través de un div pero todavía reaccione al pasar?

Digamos que tengo divA que se superpone parcialmente a divB . ¿Cómo puedo permitir que los clics en divA pasen a divB pero aún así se han disparado el hover cuando se hover sobre divA ?

Soy consciente de pointer-events:none; y esto hace que los clics pasen, pero también evita el desplazamiento.

También he intentado lo siguiente, pero no permitió que los clics cayeran

 $(document).on('click', '.feedback-helper', function(e){ e.preventDefault(); }) 

Imagina la relación de los divs como:

introduzca la descripción de la imagen aquí

Aquí está el por qué (lea como: “evitemos un problema XY” ):

Estoy trabajando en una implementación de feedback.js

Para ver el tema:

  • ver la demostración de feedback.js
  • haga clic en el botón de comentarios en la parte inferior derecha
  • Dibuja un cuadro en la pantalla para resaltar una sección.
  • haga clic en el botón “apagar”
  • intente dibujar un cuadro dentro del primer cuadro que no pueda porque el primer cuadro bloquea el clic.

Necesito permitir dibujar un cuadro de locking en un área resaltada, pero si configuro pointer-events:none; Perderé otra funcionalidad de hover que tengo en esos elementos.

Aquí hay un ejemplo de jsFiddle.

Todas las soluciones son bienvenidas

Revisé su página de ejemplo y si establece un índice z ligeramente más bajo en tipo de datos = “resaltar” que podría solucionar el problema, intente un índice z de 29990 en comparación con sus 30000 actuales. Esto debería permitirle diríjase al área de comentarios resaltada y superpóntela con los elementos ocultos.

Puede obtener el evento de clic para el elemento de superposición para iniciar el evento de clic para el elemento subyacente.

Ejemplo de JS nativo:

 document.getElementById('divA').addEventListener('click', function() { alert('Clicked A'); }); document.getElementById('divB').addEventListener('click', function() { var event = document.createEvent('HTMLEvents'); event.initEvent('click', true, false); document.getElementById('divA').dispatchEvent(event); }); 
 div { cursor: pointer; border: 1px solid black; } #divA { height: 300px; width: 300px; background: whitesmoke; } #divB { height: 30px; width: 30px; background: grey; position: absolute; left: 100px; top: 100px; } #divB:hover { background: green; } 
 

Otra opción es usar un pseudo elemento en su lugar. Tal vez eso hará lo que necesites.

 $('#toggleBlack').on('click', function() { $('#divA').toggleClass('hidden'); }); 
 div { border: 1px solid black; } #divA { background: whitesmoke; position: relative; } #divA.hidden:before { position: absolute; content: ' '; top: 0; left: 0; right: 0; bottom: 0; background: red; } 
  
Highlight the text once I'm hidden and cut/copy/drag