web-dev-qa-db-fra.com

Comment empêcher/arrêter la propagation de l'événement par défaut (clic) dans la directive (vue 2.x)

Vue.directive('login-to-click', {
  bind (el) {
    const clickHandler = (event) => {
      event.preventDefault()
      event.stopImmediatePropagation()
      alert('click')
    }
    el.addEventListener('click', clickHandler, true)
  }
})

usage

<button @click="handleClick" v-login-to-click>CLICK</button>

handleClick est toujours déclenché. Comment puis-je empêcher cela de directive? Essayé avec/sans addEventListener "capture" drapeau sans aucune chance.

Pour l'instant j'ai fini avec la solution suivante:

Vue.prototype.$checkAuth = function (handler, ...args) {
  const isLoggedIn = store.getters['session/isLoggedIn']
  if (isLoggedIn) {
    return handler.apply(this, args)
  } else {
    router.Push('/login')
  }
}

Et puis en composant

<button @click="$checkAuth(handleClick)">CLICK</button>
vue.jsvuejs2
4
user606521

dans mon application, j'ai beaucoup de boutons (suivre/aimer/ajouter à la liste de suivi/bloquer etc.) qui nécessitent que l'utilisateur soit connecté pour cliquer dessus.

Comme pour beaucoup d'éléments de Vue 2, il s'agit d'un cas d'utilisation peu utile pour une directive, mais très utile pour un composant.

Voici un bouton qui ne peut être cliqué que lorsque l'utilisateur est autorisé.

console.clear()

const AuthenticatedButton = {
  props:["onAuth", "onNonAuth", "disable", "auth"],
  template: `
    <button @click="onClick" 
            :disabled="disableWhenNotAuthorized">
      <slot>{{this.auth}}</slot>
    </button>`,
  computed:{
    disableWhenNotAuthorized(){
      return this.disable && !this.auth
    }
  },
  methods:{
    onClick(){
      if (this.auth && this.onAuth) this.onAuth()
      if (!this.auth && this.onNonAuth) this.onNonAuth()      
    }
  }
}

new Vue({
  el:"#app",
  data:{
    loggedIn: false
  },
  methods:{
    onClick(){
      alert("User is authenticated")
    },
    notAuthorized(){
      alert("You are not authorized.")
    }
  },
  components:{
    "auth-btn": AuthenticatedButton
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h3>User is {{!loggedIn ? 'Not Authorized' : 'Authorized'}}</h3>
  <auth-btn :auth="loggedIn" 
            :on-auth="onClick"
            :on-non-auth="notAuthorized">
    Executes non auth handler when not authorized
  </auth-btn> <br>
  <auth-btn :auth="loggedIn" 
            :on-auth="onClick"
            :disable="true">
    Disabled when not authorized
  </auth-btn> <br><br>
  <button @click="loggedIn = true">Authenicate User</button>
</div>

Avec ce bouton, vous pouvez définir un gestionnaire autorisé et un gestionnaire non autorisé. De plus, vous pouvez simplement désactiver le bouton si l'utilisateur n'est pas autorisé.

Dans ce composant, l'état autorisé est transmis via une propriété, mais si vous utilisiez une forme de gestion d'état (telle que Vuex), vous pourriez tout aussi bien l'utiliser à la place.

3
Bert

Si je comprends bien, il s’agit de deux gestionnaires d’événements différents, vous empêchez seulement l’événement par défaut de la borne liée dans la directive; cela n’a aucune influence sur @click; toutefois, vous n’écrasez pas le programme d’écoute des clics, mais vous en ajoutez un deuxième . Si vous souhaitez éviter la liaison par défaut de votre liaison @click, vous pouvez utiliser @click.prevent="handleClick".

Je ne pense pas qu'il soit possible de le faire à partir de la directive, puisque vous ajoutez explicitement un autre écouteur en liant @click au bouton.

2
Philip Feldmann

Dans mon cas, je dois empêcher conditionnellement le comportement par défaut des touches fléchées droite et gauche. Alors que le curseur est au milieu de mon champ de saisie, je souhaite que le comportement normal de l'événement déplace le curseur. Cependant, lorsque j'arrive au début ou à la fin de l'entrée, je souhaite que le focus passe à l'entrée suivante et place le curseur au début du champ suivant pour une flèche vers la droite et à la fin du champ suivant pour une flèche vers la gauche. Lorsque je positionne le curseur au début ou à la fin du champ suivant, le comportement d'événement par défaut gauche ou droit me donne un effet "one off". Cela est dû au fait que l'événement de flèche vers la gauche ou la droite peut terminer son comportement par défaut après le changement de focus et la définition de l'emplacement du curseur.

Dans mon cas, "event.target.preventDefault ()" n'a pas arrêté le comportement par défaut. J'ai utilisé "event.preventDefault ()" pour empêcher le comportement par défaut de l'événement:

<template>
  <div>
    <input
      @keydown.right.stop="right($event)"
    >
    <!--
      other inputs are defined here
    --> 
  </div>
</template>

<script type="text/javascript">
export default {
  methods: {
    right (event) {
      /*
        code to conditionally change input element focus goes here
      */
      // prevent default behavior
      event.preventDefault()
    }
  }
}
</script>
0
user3139574

Vous pouvez utiliser:

event.target.preventDefault();

Je ne sais pas pourquoi, cependant, vous voudriez faire cela, puisque vous ajoutez un écouteur de clic pour une raison.

Peut-être pourriez-vous clarifier votre question un peu plus.

0
Stephan-v