Question

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

使用

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

总是触发

handleClick。如何防止指令呢？尝试使用/不使用addEventListener“捕获”标志而没有任何运气。

现在我最终得到了以下解决方案：

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

然后在组件中

<button @click="$checkAuth(handleClick)">CLICK</button>

Answer 1

根据我的理解，这是两个不同的事件处理程序，你只是阻止了指令中绑定的默认事件，但这对@click没有影响，因为你没有覆盖点击监听器而是添加第二个。如果您希望阻止@click绑定的默认设置，可以使用@click.prevent="handleClick"。

我认为没有办法从指令中执行此操作，因为您通过将@click绑定到按钮来显式添加另一个侦听器。

Answer 2

在我的应用程序中我有很多按钮（关注/喜欢/添加到关注列表/块等）要求用户登录点击它们

与Vue 2中的许多内容一样，这对于指令来说是一个糟糕的用例，但对于组件来说却是一个非常好的用例。

这是一个只有在用户获得授权后才能点击的按钮。

＆＃13;

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
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.2.6/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>

＆＃13;

使用此按钮可以设置授权处理程序和未授权的处理程序。此外，如果用户未获得授权，您可以禁用该按钮。

在此组件中，授权状态通过属性传递，但如果您使用某种形式的状态管理（如Vuex），则可以轻松地使用它。

Answer 3

https://vuejs.org/v2/guide/events.html#Event-Modifiers

有几个修饰符。 .prevent是我一直在寻找的

<a href="#" @click.prevent="sendMessage('just one click');">

Answer 4

您可以使用：

event.target.preventDefault();

我不确定为什么会这样做，因为你正在添加一个点击监听器。

也许你可以更多地澄清你的问题。

Answer 5

在我的情况下，我需要有条件地阻止右箭头键和左箭头键的默认行为。当光标位于输入字段的中间时，我希望事件的正常行为能够移动光标。但是，当我到达输入的开头或结尾时，我希望焦点变为下一个输入，并将光标定位在右箭头的下一个字段的开头和左箭头的下一个字段的末尾。当我将光标定位在下一个字段的开头或结尾时，默认的左或右事件行为会给我一个“一次性”效果。发生这种情况是因为在更改焦点并设置光标位置后，左箭头键或右箭头键事件可以完成它的默认行为。

在我的情况下，“event.target.preventDefault（）”没有停止默认行为。我使用“event.preventDefault（）”来阻止事件的默认行为：

<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>

如何防止/停止在指令（vue 2.x）中传播默认事件（单击）

5 个答案: