web-dev-qa-db-fra.com

Cliquez sur la cible de l'événement donne l'élément ou son enfant, pas l'élément parent

J'ai cet élément HTML:

<div class="list-group">
    <a href="javascript:;" @click="showDetails(notification, $event)" class="list-group-item" v-for="notification in notifications" :key="notification.id">
        <h4 class="list-group-item-heading">{{ '{{ notification.title }}' }}</h4>
        <p class="list-group-item-text">{{ '{{ notification.created_at|moment }}' }}</p>
    </a>
</div>

Et ce Javascript:

return new Vue({
    methods: {
        showDetails: function (notification, event) {
          this.notification = notification

          console.info(event.target)
        }
    }
}

Le problème est que event.target renvoie l'élément exact sur lequel je clique. Cela signifie que ce peut être l'élément a, ou l'un de ses enfants (h4 ou p).

Comment obtenir l'élément a (l'élément avec le @click handler), même si l'utilisateur clique sur l'un de ses enfants?

javascriptvue.jsvuejs2
11
Stephan Vierkant

utilisation event.currentTarget qui pointe vers l'élément auquel vous avez attaché l'écouteur. Cela ne change pas car l'événement bouillonne

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

24
ibrahim tanyalcin

Solution alternative avec CSS:

a * {
    pointer-events: none;
}

L'élément n'est jamais la cible d'événements de pointeur; cependant, les événements de pointeur peuvent cibler ses éléments descendants si ces descendants ont des événements de pointeur définis sur une autre valeur. Dans ces circonstances, les événements de pointeur déclencheront des écouteurs d'événements sur cet élément parent, le cas échéant, sur leur chemin vers/depuis le descendant pendant les phases de capture/bulle d'événement.

Réf: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values

0
Itang Sanjana