如何使用Vue指令防止鏈接或按鈕中的點擊事件

Question

嗨，我正在使用 vue 指令，如果元素是<a>或<button>標記，我正在嘗試阻止單擊事件。 所以我的問題是，這可以使用 vue 指令嗎？

html

<a 
    @click.stop.prevent="displayModal()"
    v-noclick="test">
    I'm a link
</a>

Vue 指令

Vue.directive('noclick', {
    bind( elem, binding, vnode ) {

        let user = {'name': 'John Doe'}

        if( user ) {
            let hasAccess = false

            if( !hasAccess ) {
                if( elem.tagName === 'A' ) {
                    elem.addEventListener( 'click', ( event ) => {
                        //this should prevent the element on click event
                        //but not working

                        event.stopPropagation()
                        event.preventDefault()
                        event.stopImmediatePropagation()
                        return false
                    })
                    return true
                }
            }
        }
    }
}

Answer 1

Vue 在v-noclick之前首先注冊@click事件，您可以在該元素上添加第二個單擊事件偵聽器。 當點擊<a> ，將首先執行displayModal()函數，然后將執行v-noclick指令中的偵聽器。 如果聽眾以相反的順序注冊，那么它可能會起作用。

盡管如此，看起來您嘗試做的事情不應該在自定義指令中完成。 相反，您可以在單擊處理程序本身中執行相同的邏輯：

<a @click="onClick">Foo</a>

onClick() {
  if (whatever) {
    this.displayModal()
  }
}

Answer 2

我找不到一種 vue 方法來做到這一點。 但是使用 js 你可以使用這樣的條件序列

<a @click="cond && onClick"></a>

在這種情況下，如果 cond 等於 true 然后 onClick 將調用