Javascript Vue指令的优先级？

我使用了第三方组件库的一个表单组件，该组件库没有禁用道具，我通过@click将一个单击事件绑定到每个表单项，以便在单击表单项时弹出一个对话框。但我的问题是，在某些情况下，表单项不应该是可单击的，因此我创建了一个自定义的prevent click指令，如下所示：

const clickHandler = e => {
  e.stopImmediatePropagation()
  e.stopPropagation()
  return false
}

const directive = {
  bind(el, { value }) {
    if (value) {
      el.addEventListener('click', clickHandler, true)
    }
  },
  update(el, { value }) {
    if (!value) {
      el.removeEventListener('click', clickHandler, true)
    } else {
     el.addEventListener('click', clickHandler, true)
    }
  }
}

这样使用：

<form-item v-prevent-click="true" @click="showDialog"></form-item>

provent-click指令除了向表单项添加捕获的事件监听器之外什么都不做，这会停止传播，到目前为止一切进展顺利，但问题是表单项有一个伪子元素，它是由css在选择器之后添加的。因此，当我单击伪子元素时，由于伪子元素本身不会分派click事件而不是form item，因此form item元素仍然会分派事件，除了首先绑定了vue内置指令@click event handler之外，这导致addEventListener方法的useCapture参数无效

---

在1.x版本中，有custom指令的priority选项，但是2.x删除了它。那么，除了内置的@click之外，还有什么方法可以让我的自定义指令绑定呢

考虑将标志传递给

showDialog

。如果无法修改

showDialog

函数，请将其包装到另一个函数中：

// Your compoennt template
<form-item @click="wrappedShowDialog(true)"></form-item>

// Vue.js component
wrappedShowDialog(isAllowed) {
    if (isAllowed) {
        this.showDialog();
    }
}

//您的组件模板
//Vue.js组件
wrappedShowDialog（不允许）{
如果（不允许）{
this.showDialog（）；
}
}

您应该使用Vue的内置事件修饰符（参考）。试试这个：

<form-item @click.stop.prevent="showDialog"></form-item>

脚本

methods: {
    showDialog(e) {
        e.preventDefault();
        // Your code to display dialog...
    }
}

如果您还需要将参数传递给

showDialog

，请记住您可以-只需将事件作为第一个参数传递：

<form-item @click="showDialog($event, urData)"></form-item>

您可以使用事件修饰符吗？并将阻止调用直接附加到@click？emmm，我已经检查了事件修饰符，我认为它们对我的情况不起作用……您也可以尝试添加

e.preventDefault（）

emmm，我真的不想更改showDialog代码，这就是为什么我想使用自定义指令。但是我会尝试一下，如果完全没有办法通过自定义指令来实现，我真的不知道你为什么需要这样做。那么...怎么样与您正在使用的第三方组件库一样，在这些情况下，组件不应被单击，为什么您认为内置事件修饰符不起作用，以及为什么您绝对需要自定义指令。

<form-item @click="showDialog($event, urData)"></form-item>