1
votes

Comment arrêter la propagation des clics en cliquant sur une fenêtre contextuelle de dépliant?

J'ai une fenêtre contextuelle dans une carte dépliant qui peut être fermée en cliquant sur le «x» dans son coin supérieur droit. Comment faire en sorte que l'événement de clic ne se propage pas sur la carte elle-même?

J'ai essayé d'utiliser preventPropagate () dans de nombreux endroits et formes, mais aucun d'entre eux ne semble fonctionner.

Mon dernier code semble comme ça:

<div class="actions" @click="stopPropagation($event)">

(...)

stopPropagation(e) {
  e.stopPropagation()
}

Le div ci-dessus (.actions) est le div principal du popup.

J'ai aussi essayé d'appeler la fonction en un clic dans le la balise de composant de popup dans le composant parent, mais le résultat était le même, ce qui signifie que cliquer sur le 'x' ferme la popup comme prévu mais entraîne également un événement de clic dans la carte qui se trouve derrière.

J'utilise Vue et vue2-leaflet.

J'apprécie toute idée de votre part. Merci!

MISE À JOUR: en fait, peu importe où dans la fenêtre contextuelle le clic se produit, il est toujours propagé sur la carte derrière.

vue.js mouseevent leaflet stoppropagation

0 commentaires

4 Réponses :

0
votes

Pourrait essayer un modificateur d'événement

Peut-être le stop modificateur:

<div class="actions" @click.stop="closePopup">

1 commentaires

Merci d'avoir répondu. Cela a du sens, mais malheureusement, cela ne fonctionne pas pour moi. Le clic se propage toujours.

1
votes

Donc, pour référence, voici ma solution:

<div class="actions" @click="someMethod($event)">

(...)

someMethod(e) {
  (... some code)
  return false
}

La commande 'return false' est ce qui a résolu mon problème.

J'ai essayé d'utiliser'@click.stop ', mais cela me donne l'erreur' $ event.stopPropagation () n'est pas une fonction '. La même chose se produit si j'exécute 'e.stopPropagation ()' depuis l'intérieur de la fonction.

2 commentaires

Avez-vous trouvé un autre moyen de faire cela?

Non, je ne peux pas expliquer mais parfois cette solution fonctionne parfois non. Ce que je fais maintenant, c'est utiliser une machine à états (dans mon cas xstate), afin qu'elle ne réponde qu'aux clics définis par l'état actuel. Bien sûr, cela ne fonctionnera pas pour tous les projets, mais pour moi, cela fait un très bon travail. Si vous avez besoin, je peux élaborer là-dessus.

0
votes

La réponse acceptée n'a pas fonctionné pour moi, j'ai donc enveloppé ma l-map dans un div et appliqué le click.stop à cela.

<div @click.stop.prevent.self="">
  <l-map...>
</div>

Il il me semble que l'événement de clic réel est analysé par la bibliothèque de dépliants plutôt que par vue-2-leaflet compatible Vue, donc l'événement qui est reçu par la fonction n'a pas stopPropagation ou méthodes preventDefault sur l'objet. Ainsi, lorsque Vue les appelle avec .stop ou .prevent , le moteur JS renvoie une erreur.

0 commentaires

0
votes

C'est ce que j'ai découvert pour mon problème de gestion des événements et d'arrêt de la propagation.

Par exemple,

someReference.on("click", (evt: L.LeafletEvent) => {
    // You don't try to reference the event (evt) that is passed in
    L.DomEvent.stopPropagation; // Just call this and it kills the propagation

    // or you can call
    // L.DomEvent.preventDefault(evt);
    ...
})

0 commentaires