0
137
ViewsCómo evitar que svg encima de otro div active mouseleave
Tengo un problema con mouseleave . (Proyecto React/Typescript/CSS/HTML).
Situación
(ver imagen en la parte inferior)
Tengo dos elementos div
<> <div id="main"> <div> <div id="onHover" style={{display: "none"}}> </div> </> y obtuve un svg encima de div main .
return( <svg className="click-through" pointer-events="none" width={1560} height={262}> <VictoryChart style={{ parent: { pointerEvents: 'none' } }} > <VictoryArea style={{ parent: { border: '1px solid #ccc', pointerEvents: 'none' } }} /> </VictoryChart> </svg> )Meta:
- Al pasar el mouse sobre
div main,div onHoverdebe mostrarse junto adiv main - Al salir de
div main,div onHoverdebería desaparecer nuevamente.
El primer objetivo no es un problema, el segundo es: debido a svg , mouseleave se activa demasiado pronto.
Toda la situación como una imagen (las líneas blancas punteadas son del svg que activan mouseleave , el cuadro azul sería div main ):
Por otras razones, el svg no puede ir detrás de div main . ¿Cómo puedo asegurarme ahora de que las líneas svg no activen mouseleave ?
Más información
- Para el
svgestoy usandovictory jspara mostrar gráficos - Ese
svgtiene la propiedadclick throughypointer-events: none - Esta situación está muy simplificada pero explica mi problema clave
2 answers
Answer question0
¿Intentó agregar pointer-events: none; a ese SVG? Aquí hay un ejemplo (el cuadro verde no activa ningún evento, pero el azul sí):
const wrap = document.querySelector('.mouseleave'); wrap.addEventListener('mouseleave', () => { console.log(".mouseleave left"); }); .wrap { position: relative; } .mouseleave { height: 200px; border: 2px solid red; } .p-none, .p-default { height: calc(100% - 2rem); position: absolute; top: 1rem; } .p-none { pointer-events: none; border: 2px solid green; left: 1rem; } .p-default { border: 2px solid cyan; right: 1rem; } <div class="wrap"> <div class="mouseleave"></div> <div class="p-none">pointer events: none</div> <div class="p-default">pointer events: default</div> </div>0
los pointer-events: none propiedad debe establecerse en css
pero la forma más moderna (y de gran rendimiento) es usar un PointerEvent en lugar de MouseEvent y vincular el evento al elemento deseado... de esa manera todos los demás elementos que escuchan no disparan en absoluto...
element.setPointerCapture(ev.pointerId)