Détecter l'élément extérieur de clic

Comment puis-je détecter un clic en dehors de mon élément? J'utilise Vue.js donc ça va être en dehors de mon élément templates. Je sais comment le faire dans Vanilla JS, mais je ne suis pas sûr qu'il existe un moyen plus approprié de le faire, lorsque j'utilise Vue.js?

Voici la solution pour Vanilla JS: événement Javascript Detect Click en dehors de div

Je suppose que je peux utiliser un meilleur moyen d'accéder à l'élément?

Peut être résolu correctement en configurant une fois une directive personnalisée:

Vue.directive('click-outside', {
  bind () {
      this.event = event => this.vm.$emit(this.expression, event)
      this.el.addEventListener('click', this.stopProp)
      document.body.addEventListener('click', this.event)
  },   
  unbind() {
    this.el.removeEventListener('click', this.stopProp)
    document.body.removeEventListener('click', this.event)
  },

  stopProp(event) { event.stopPropagation() }
})

Usage:

<div v-click-outside="nameOfCustomEventToCall">
  Some content
</div>

Dans le composant:

events: {
  nameOfCustomEventToCall: function (event) {
    // do something - probably hide the dropdown menu / modal etc.
  }
}

Démonstration de travail sur JSFiddle avec des informations supplémentaires sur les mises en garde:

https://jsfiddle.net/Linusborg/yzm8t8jq/

Il y a la solution que j'ai utilisée, qui est basée sur la réponse de Linus Borg et fonctionne très bien avec vue.js 2.0.

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his children
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

Vous vous y liez en utilisant v-click-outside:

<div v-click-outside="doStuff">

Voici une petite démo

Vous pouvez trouver plus d'informations sur les directives personnalisées et ce que signifie el, binding, vnode dans https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

Ajoutez un tabindexattribut à votre composant afin qu'il puisse être ciblé et procédez comme suit:

<template>
    <div
        @focus="handleFocus"
        @focusout="handleFocusOut"
        tabindex="0"
    >
      SOME CONTENT HERE
    </div>
</template>

<script>
export default {    
    methods: {
        handleFocus() {
            // do something here
        },
        handleFocusOut() {
            // do something here
        }
    }
}
</script>

Il existe deux packages disponibles dans la communauté pour cette tâche (les deux sont maintenus):

• https://github.com/simplesmiler/vue-clickaway
• https://github.com/ndelvalle/v-click-outside

Cela a fonctionné pour moi avec Vue.js 2.5.2:

/**
 * Call a function when a click is detected outside of the
 * current DOM node ( AND its children )
 *
 * Example :
 *
 * <template>
 *   <div v-click-outside="onClickOutside">Hello</div>
 * </template>
 *
 * <script>
 * import clickOutside from '../../../../directives/clickOutside'
 * export default {
 *   directives: {
 *     clickOutside
 *   },
 *   data () {
 *     return {
         showDatePicker: false
 *     }
 *   },
 *   methods: {
 *     onClickOutside (event) {
 *       this.showDatePicker = false
 *     }
 *   }
 * }
 * </script>
 */
export default {
  bind: function (el, binding, vNode) {
    el.__vueClickOutside__ = event => {
      if (!el.contains(event.target)) {
        // call method provided in v-click-outside value
        vNode.context[binding.expression](event)
        event.stopPropagation()
      }
    }
    document.body.addEventListener('click', el.__vueClickOutside__)
  },
  unbind: function (el, binding, vNode) {
    // Remove Event Listeners
    document.removeEventListener('click', el.__vueClickOutside__)
    el.__vueClickOutside__ = null
  }
}

export default {
  bind: function (el, binding, vNode) {
    // Provided expression must evaluate to a function.
    if (typeof binding.value !== 'function') {
      const compName = vNode.context.name
      let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
      if (compName) { warn += `Found in component '${compName}'` }

      console.warn(warn)
    }
    // Define Handler and cache it on the element
    const bubble = binding.modifiers.bubble
    const handler = (e) => {
      if (bubble || (!el.contains(e.target) && el !== e.target)) {
        binding.value(e)
      }
    }
    el.__vueClickOutside__ = handler

    // add Event Listeners
    document.addEventListener('click', handler)
  },

  unbind: function (el, binding) {
    // Remove Event Listeners
    document.removeEventListener('click', el.__vueClickOutside__)
    el.__vueClickOutside__ = null

  }
}

J'ai combiné toutes les réponses (y compris une ligne de vue-clickaway) et j'ai trouvé cette solution qui fonctionne pour moi:

Vue.directive('click-outside', {
    bind(el, binding, vnode) {
        var vm = vnode.context;
        var callback = binding.value;

        el.clickOutsideEvent = function (event) {
            if (!(el == event.target || el.contains(event.target))) {
                return callback.call(vm, event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent);
    },
    unbind(el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
    }
});

Utilisation dans le composant:

<li v-click-outside="closeSearch">
  <!-- your component here -->
</li>

J'ai mis à jour la réponse de MadisonTrash pour prendre en charge Mobile Safari (qui n'a pas d' clickévénement, touchenddoit être utilisé à la place). Cela comprend également une vérification afin que l'événement ne soit pas déclenché en faisant glisser sur les appareils mobiles.

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.eventSetDrag = function () {
            el.setAttribute('data-dragging', 'yes');
        }
        el.eventClearDrag = function () {
            el.removeAttribute('data-dragging');
        }
        el.eventOnClick = function (event) {
            var dragging = el.getAttribute('data-dragging');
            // Check that the click was outside the el and its children, and wasn't a drag
            if (!(el == event.target || el.contains(event.target)) && !dragging) {
                // call method provided in attribute value
                vnode.context[binding.expression](event);
            }
        };
        document.addEventListener('touchstart', el.eventClearDrag);
        document.addEventListener('touchmove', el.eventSetDrag);
        document.addEventListener('click', el.eventOnClick);
        document.addEventListener('touchend', el.eventOnClick);
    }, unbind: function (el) {
        document.removeEventListener('touchstart', el.eventClearDrag);
        document.removeEventListener('touchmove', el.eventSetDrag);
        document.removeEventListener('click', el.eventOnClick);
        document.removeEventListener('touchend', el.eventOnClick);
        el.removeAttribute('data-dragging');
    },
});

J'utilise ce code:

bouton afficher-masquer

 <a @click.stop="visualSwitch()"> show hide </a>

élément afficher-masquer

<div class="dialog-popup" v-if="visualState" @click.stop=""></div>

scénario

data () { return {
    visualState: false,
}},
methods: {
    visualSwitch() {
        this.visualState = !this.visualState;
        if (this.visualState)
            document.addEventListener('click', this.visualState);
        else
            document.removeEventListener('click', this.visualState);
    },
},

Mise à jour: retirer la montre; ajouter l'arrêt de la propagation

Je déteste les fonctions supplémentaires alors ... voici une solution de vue géniale sans méthodes de vue supplémentaires, seulement var

1. créer un élément html, définir des contrôles et une directive

    <p @click="popup = !popup" v-out="popup">

    <div v-if="popup">
       My awesome popup
    </div>

2. créer une variable dans les données comme

data:{
   popup: false,
}

3. add vue directive. ses

Vue.directive('out', {

    bind: function (el, binding, vNode) {
        const handler = (e) => {
            if (!el.contains(e.target) && el !== e.target) {
                //and here is you toggle var. thats it
                vNode.context[binding.expression] = false
            }
        }
        el.out = handler
        document.addEventListener('click', handler)
    },

    unbind: function (el, binding) {
        document.removeEventListener('click', el.out)
        el.out = null
    }
})

Si vous recherchez spécifiquement un clic en dehors de l'élément mais toujours dans le parent, vous pouvez utiliser

<div class="parent" @click.self="onParentClick">
  <div class="child"></div>
</div>

J'utilise ceci pour les modaux.

Vous pouvez enregistrer deux écouteurs d'événements pour un événement de clic comme celui-ci

document.getElementById("some-area")
        .addEventListener("click", function(e){
        alert("You clicked on the area!");
        e.stopPropagation();// this will stop propagation of this event to upper level
     }
);

document.body.addEventListener("click", 
   function(e) {
           alert("You clicked outside the area!");
         }
);

  <button 
    class="dropdown"
    @click.prevent="toggle"
    ref="toggle"
    :class="{'is-active': isActiveEl}"
  >
    Click me
  </button>

  data() {
   return {
     isActiveEl: false
   }
  }, 
  created() {
    window.addEventListener('click', this.close);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.close);
  },
  methods: {
    toggle: function() {
      this.isActiveEl = !this.isActiveEl;
    },
    close(e) {
      if (!this.$refs.toggle.contains(e.target)) {
        this.isActiveEl = false;
      }
    },
  },

La réponse courte: cela devrait être fait avec des directives personnalisées .

Il y a beaucoup de bonnes réponses ici qui le disent également, mais la plupart des réponses que j'ai vues se décomposent lorsque vous commencez à utiliser le clic extérieur de manière intensive (en particulier en couches ou avec plusieurs exclusions). J'ai écrit un article sur le médium parlant des nuances des directives douanières et spécifiquement de la mise en œuvre de celle-ci. Il ne couvre peut-être pas tous les cas marginaux, mais il a couvert tout ce que j'ai pensé.

Cela représentera plusieurs liaisons, plusieurs niveaux d'autres exclusions d'éléments et permettra à votre gestionnaire de gérer uniquement la «logique métier».

Voici le code pour au moins la partie définition de celui-ci, consultez l'article pour une explication complète.

var handleOutsideClick={}
const OutsideClick = {
  // this directive is run on the bind and unbind hooks
  bind (el, binding, vnode) {
    // Define the function to be called on click, filter the excludes and call the handler
    handleOutsideClick[el.id] = e => {
      e.stopPropagation()
      // extract the handler and exclude from the binding value
      const { handler, exclude } = binding.value
      // set variable to keep track of if the clicked element is in the exclude list
      let clickedOnExcludedEl = false
      // if the target element has no classes, it won't be in the exclude list skip the check
      if (e.target._prevClass !== undefined) {
        // for each exclude name check if it matches any of the target element's classes
        for (const className of exclude) {
          clickedOnExcludedEl = e.target._prevClass.includes(className)
          if (clickedOnExcludedEl) {
            break // once we have found one match, stop looking
          }
        }
      }
      // don't call the handler if our directive element contains the target element
      // or if the element was in the exclude list
      if (!(el.contains(e.target) || clickedOnExcludedEl)) {
        handler()
      }
    }
    // Register our outsideClick handler on the click/touchstart listeners
    document.addEventListener('click', handleOutsideClick[el.id])
    document.addEventListener('touchstart', handleOutsideClick[el.id])
    document.onkeydown = e => {
      //this is an option but may not work right with multiple handlers
      if (e.keyCode === 27) {
        // TODO: there are minor issues when escape is clicked right after open keeping the old target
        handleOutsideClick[el.id](e)
      }
    }
  },
  unbind () {
    // If the element that has v-outside-click is removed, unbind it from listeners
    document.removeEventListener('click', handleOutsideClick[el.id])
    document.removeEventListener('touchstart', handleOutsideClick[el.id])
    document.onkeydown = null //Note that this may not work with multiple listeners
  }
}
export default OutsideClick

Je l'ai fait d'une manière légèrement différente en utilisant une fonction dans created ().

  created() {
      window.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)){
          this.showMobileNav = false
        }
      })
  },

De cette façon, si quelqu'un clique en dehors de l'élément, dans mon cas, la navigation mobile est masquée.

J'espère que cela t'aides!

Il existe déjà de nombreuses réponses à cette question, et la plupart d'entre elles sont basées sur l'idée de directive personnalisée similaire. Le problème avec cette approche est que l'on doit passer une fonction de méthode à la directive, et ne peut pas directement écrire du code comme dans d'autres événements.

J'ai créé un nouveau package vue-on-clickoutqui est différent. Découvrez-le sur:

• https://github.com/MuTsunTsai/vue-on-clickout

Il permet d'écrire v-on:clickoutcomme n'importe quel autre événement. Par exemple, vous pouvez écrire

<div v-on:clickout="myField=value" v-on:click="myField=otherValue">...</div>

et il fonctionne.

Mettre à jour

vue-on-clickout prend désormais en charge Vue 3!

Juste si quelqu'un cherche comment masquer le modal en cliquant en dehors du modal. Comme modal a généralement son wrapper avec la classe de modal-wrapou tout ce que vous avez nommé, vous pouvez mettre @click="closeModal"le wrapper. En utilisant la gestion des événements indiquée dans la documentation vuejs, vous pouvez vérifier si la cible cliquée est soit sur le wrapper, soit sur le modal.

methods: {
  closeModal(e) {
    this.event = function(event) {
      if (event.target.className == 'modal-wrap') {
        // close modal here
        this.$store.commit("catalog/hideModal");
        document.body.removeEventListener("click", this.event);
      }
    }.bind(this);
    document.body.addEventListener("click", this.event);
  },
}

<div class="modal-wrap" @click="closeModal">
  <div class="modal">
    ...
  </div>
<div>

Les solutions @Denis Danilenko fonctionnent pour moi, voici ce que j'ai fait: Au fait, j'utilise VueJS CLI3 et NuxtJS ici et avec Bootstrap4, mais cela fonctionnera également sur VueJS sans NuxtJS:

<div
    class="dropdown ml-auto"
    :class="showDropdown ? null : 'show'">
    <a 
        href="#" 
        class="nav-link" 
        role="button" 
        id="dropdownMenuLink" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false"
        @click="showDropdown = !showDropdown"
        @blur="unfocused">
        <i class="fas fa-bars"></i>
    </a>
    <div 
        class="dropdown-menu dropdown-menu-right" 
        aria-labelledby="dropdownMenuLink"
        :class="showDropdown ? null : 'show'">
        <nuxt-link class="dropdown-item" to="/contact">Contact</nuxt-link>
        <nuxt-link class="dropdown-item" to="/faq">FAQ</nuxt-link>
    </div>
</div>

export default {
    data() {
        return {
            showDropdown: true
        }
    },
    methods: {
    unfocused() {
        this.showDropdown = !this.showDropdown;
    }
  }
}

Vous pouvez émettre un événement javascript natif personnalisé à partir d'une directive. Créez une directive qui distribue un événement à partir du nœud, à l'aide de node.dispatchEvent

let handleOutsideClick;
Vue.directive('out-click', {
    bind (el, binding, vnode) {

        handleOutsideClick = (e) => {
            e.stopPropagation()
            const handler = binding.value

            if (el.contains(e.target)) {
                el.dispatchEvent(new Event('out-click')) <-- HERE
            }
        }

        document.addEventListener('click', handleOutsideClick)
        document.addEventListener('touchstart', handleOutsideClick)
    },
    unbind () {
        document.removeEventListener('click', handleOutsideClick)
        document.removeEventListener('touchstart', handleOutsideClick)
    }
})

Qui peut être utilisé comme ça

h3( v-out-click @click="$emit('show')" @out-click="$emit('hide')" )

Je crée un div à la fin du corps comme ça:

<div v-if="isPopup" class="outside" v-on:click="away()"></div>

Où .à l'extérieur est:

.outside {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
}

Et away () est une méthode dans l'instance Vue:

away() {
 this.isPopup = false;
}

Facile, fonctionne bien.

Si vous avez un composant avec plusieurs éléments à l'intérieur de l'élément racine, vous pouvez utiliser cette solution It just works ™ avec un booléen.

<template>
  <div @click="clickInside"></div>
<template>

<script>
export default {
  name: "MyComponent",
  methods: {
    clickInside() {
      this.inside = true;
      setTimeout(() => (this.inside = false), 0);
    },
    clickOutside() {
      if (this.inside) return;
      // handle outside state from here
    }
  },
  created() {
    this.__handlerRef__ = this.clickOutside.bind(this);
    document.body.addEventListener("click", this.__handlerRef__);
  },
  destroyed() {
    document.body.removeEventListener("click", this.__handlerRef__);
  },
};
</script>

Utilisez ce package vue-clic-extérieur

C'est simple et fiable, actuellement utilisé par de nombreux autres packages. Vous pouvez également réduire la taille de votre bundle javascript en appelant le package uniquement dans les composants requis (voir l'exemple ci-dessous).

npm install vue-click-outside

Utilisation:

<template>
  <div>
    <div v-click-outside="hide" @click="toggle">Toggle</div>
    <div v-show="opened">Popup item</div>
  </div>
</template>

<script>
import ClickOutside from 'vue-click-outside'

export default {
  data () {
    return {
      opened: false
    }
  },

  methods: {
    toggle () {
      this.opened = true
    },

    hide () {
      this.opened = false
    }
  },

  mounted () {
    // prevent click outside event with popupItem.
    this.popupItem = this.$el
  },

  // do not forget this section
  directives: {
    ClickOutside
  }
}
</script>

Ne réinventez pas la roue, utilisez ce package v-click-outside

Vous pouvez créer un nouveau composant qui gère le clic extérieur

Vue.component('click-outside', {
  created: function () {
    document.body.addEventListener('click', (e) => {
       if (!this.$el.contains(e.target)) {
            this.$emit('clickOutside');
           
        })
  },
  template: `
    <template>
        <div>
            <slot/>
        </div>
    </template>
`
})

Et utilisez ce composant:

<template>
    <click-outside @clickOutside="console.log('Click outside Worked!')">
      <div> Your code...</div>
    </click-outside>
</template>

fréquemment, les gens veulent savoir si l'utilisateur quitte le composant racine (fonctionne avec tous les composants de niveau)

Vue({
  data: {},
  methods: {
    unfocused : function() {
      alert('good bye');
    }
  }
})

<template>
  <div tabindex="1" @blur="unfocused">Content inside</div>
</template>

J'ai une solution pour gérer le menu déroulant à bascule:

export default {
data() {
  return {
    dropdownOpen: false,
  }
},
methods: {
      showDropdown() {
        console.log('clicked...')
        this.dropdownOpen = !this.dropdownOpen
        // this will control show or hide the menu
        $(document).one('click.status', (e)=> {
          this.dropdownOpen = false
        })
      },
}

J'utilise ce package: https://www.npmjs.com/package/vue-click-outside

Ça fonctionne bien pour moi

HTML:

<div class="__card-content" v-click-outside="hide" v-if="cardContentVisible">
    <div class="card-header">
        <input class="subject-input" placeholder="Subject" name=""/>
    </div>
    <div class="card-body">
        <textarea class="conversation-textarea" placeholder="Start a conversation"></textarea>
    </div>
</div>

Mes codes de script:

import ClickOutside from 'vue-click-outside'
export default
{
    data(){
        return {
            cardContentVisible:false
        }
    },
    created()
    {
    },
    methods:
        {
            openCardContent()
            {
                this.cardContentVisible = true;
            }, hide () {
            this.cardContentVisible = false
                }
        },
    directives: {
            ClickOutside
    }
}