Les événements de clic SVG ne se déclenchent pas/bouillonnent lors de l'utilisation de l'élément <use>
Je suis tombé sur un bogue intéressant (?) Selon lequel si vous intégrez le SVG en utilisant <use> dans le cadre d'un lien (une icône par exemple) - l'icône elle-même n'enregistre pas un événement de clic dans jQuery, mais le fait de cliquer sur le texte. Je pense que cela est dû aux événements SVG qui ne bouillonnent pas?
Si vous intégrez directement le fichier SVG, le lien se déclenche, que vous cliquiez sur le texte ou sur l'icône.
Un cas de test simple que j'ai créé peut être vu ici: SVG <use> cas de test de bogue .
Utilisez pointer-events: none; sur le svg. Cela a fonctionné pour moi.
L'élément n'est jamais la cible d'événements de souris; cependant, les événements de souris peut cibler ses éléments descendants si ces descendants ont pointeur-événements mis à une autre valeur. Dans ces circonstances, souris Les événements déclenchent des écouteurs d'événements sur cet élément parent en tant que approprié sur leur chemin vers/depuis le descendant pendant l'événement phases de capture/bulle.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
J'ai eu le même problème. Le correctif que j'utilise est de simplement mettre une div transparente sur le svg. Mais ce n'est pas idéal bien sûr.
J'ai eu le même problème et j'ai utilisé display: block ou display: inline-block sur le lien et cela a fonctionné.