Question

嗨，我正在使用vue指令，并且如果元素是<a>或<button>标签，我试图阻止click事件。所以我的问题是，使用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在int之前先注册@click事件，然后在该元素上添加第二个click事件监听器。单击v-noclick时，将首先执行<a>函数，然后将执行displayModal()指令中的侦听器。如果以相反的顺序注册了侦听器，则可能会起作用。

尽管如此，看起来您要执行的操作似乎不应该在自定义指令中完成。相反，您可以在点击处理程序本身中执行相同的逻辑：

v-noclick

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

Answer 2

我找不到可行的方法。但是使用js可以使用这样的条件序列

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

在这种情况下，如果cond等于true，则将调用onClick

如何使用Vue指令防止链接或按钮中的点击事件

2 个答案: