Suite

Dépliant personnalisé div & propagation des clics sur d'autres éléments


J'ai réussi à appliquer du code HTML personnalisé dans mon élément #map (où Leaflet est ajouté), mais j'ai un comportement inhabituel avec d'autres objets Leaflet qui se trouvent dans la partie transparente de mon div.

Le div complet est surligné en bleu dans l'image ci-dessus. La zone au-dessus du marqueur et sa fenêtre contextuelle n'ont aucun style particulier ni aucune application Javascript pour affecter explicitement la propagation des événements.

Cependant, si je devais cliquer n'importe où sur cette fenêtre contextuelle ou son marqueur de carte, le clic se propagerait jusqu'à la carte, plutôt que de s'arrêter à la fenêtre contextuelle/au marqueur. C'est comme si la fonctionnalité stopPropagation inhérente à ces objets était en quelque sorte annulée en étant sous ma div personnalisée. Mon curseur a également la main de préhension associée au déplacement de la carte, alors qu'il devrait être un pointeur par défaut lorsqu'il se trouve sur ces objets.

Si je fais défiler la carte de sorte que ces objets soient en dehors de mon div (en dehors du bleu), alors mes clics s'arrêtent correctement sur eux.

Je ne sais pas si c'est pertinent, mais les parties supérieure et gauche de la div personnalisée fais ont stopPropagation qui leur est appliqué, qui fonctionne également comme prévu. Mais encore une fois, leur élément parent (toute la zone bleue) ne le fait pas.

Des pensées?

P.S. Je dois également souligner qu'en raison d'une logique de mise à l'échelle dynamique pour le redimensionnement, il n'y a aucun moyen de se débarrasser de l'élément parent sans une solution de contournement considérable et complexe, que nous préférerions éviter. Sinon, je l'aurais déjà fait pour contourner le problème.


Je mettrais la superposition et les divs de carte en tant qu'enfants d'un div parent et utiliserais la propriété css mouse-event pour assurer une propagation correcte. Voir : https://stackoverflow.com/questions/17537496/bootstrap-row-over-leaflet Attention, si vous avez besoin que la fenêtre contextuelle apparaisse au-dessus de ce code HTML personnalisé, vous rencontrerez probablement des problèmes de commande.


Voir la vidéo: Aide TP4 création dynamique déléments (Octobre 2021).