web-dev-qa-db-fra.com

Vue.js + Appelez l'événement click pour le document de la page entière

Avec JQuery, l'événement de clic de n'importe quel élément de la page peut être capturé comme ci-dessous.

$(document).click(function(event){
     // event.target is the clicked element object
});

Comment faire de même avec Vue.js?

javascriptvue.jsvuejs2
9
asankasri
  1. Créer div en tant que nœud supérieur, juste après <body>
  2. Faites-en le contenant principal.
  3. Montez VueJS à cela.
  4. <div id='yourMainDiv' @click='yourClickHandler'>

  5. Dans votre VueJS <script> partie l'utilise:

    méthodes: {yourClickHandler (événement) {// faites ce que vous voulez avec l'événement // qui est exactement le même objet que dans votre question}}

6
M U

La réponse fournie par M est correcte et fonctionne.

Pourtant, si vous n'aimez pas jouer avec votre modèle (par exemple, ne pas y mettre beaucoup de gestionnaires d'événements) ou votre application Vue n'est qu'une petite partie d'une application plus grande, elle est également parfaitement bien et acceptable d'enregistrer manuellement les gestionnaires d'événements.

Pour ajouter des gestionnaires d'événements globaux dans votre script de la manière Vue , vous devez les enregistrer dans la monté et les retirer dans les crochets beforeDestroy .

Petit exemple:

var app = new Vue({
  el: '#app',
  mounted: function () {
    // Attach event listener to the root vue element
    this.$el.addEventListener('click', this.onClick)
    // Or if you want to affect everything
    // document.addEventListener('click', this.onClick)
  },
  beforeDestroy: function () {
    this.$el.removeEventListener('click', this.onClick)
    // document.removeEventListener('click', this.onClick)
  },
  methods: {
    onClick: function (ev) {
      console.log(ev.offsetX, ev.offsetY)
    }
  }
})
24
Bengt

Toutes les réponses fournies fonctionnent, mais aucune ne reproduit le comportement réel de $(document).click(). Ils n'attrapent que des clics sur l'élément d'application racine, mais pas sur l'ensemble du document. Bien sûr, vous pouvez définir votre élément racine sur height: 100% ou quelque chose. Mais si vous voulez en être sûr, il est préférable de modifier la solution Bengt et d'attacher l'écouteur d'événements directement au document .

new Vue({
  ...
  methods: {
    onClick() {},
  }
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
  ...
});

N'oubliez pas que vous devez utiliser @ click.stop dans les éléments enfants si, pour une raison quelconque, vous devez arrêter la propagation des événements vers le gestionnaire principal.

4
xpuu

De plus, si vous devez suivre un événement de clic en dehors d'un élément spécifique, vous pouvez utiliser le composant vue-clickaway . Exemple de la démo :

<div id="demo">
  <p v-on-clickaway="away" @click="click" :style="{ color: color }">{{ text }}</p>
</div>


new Vue({
  el: '#demo',
  mixins: [VueClickaway.mixin],
  data: {
    text: 'Click somewhere.',
    color: 'black',
  },
  methods: {
    click: function() {
      this.text = 'You clicked on me!';
      this.color = 'green';
    },
    away: function() {
      this.text = 'You clicked away...';
      this.color = 'red';
    },
  },
});
3
Kirill Freiman