如何使用Vue指令阻止<a>或<button>标签的点击事件？

当然可以用Vue指令实现这个需求！咱们先看看你现有代码里的问题，再一步步解决它。

你的代码为什么不生效？ #

你当前的指令里通过addEventListener添加了点击事件，但Vue绑定的@click事件会先于你指令里的事件执行——因为Vue默认把事件绑定在冒泡阶段，而你添加的事件也是冒泡阶段（默认第三个参数是false），所以当点击触发时，Vue的displayModal()已经执行了，之后才轮到你指令里的阻止逻辑，自然没效果。

解决方案：在捕获阶段拦截事件 #

事件传播分为「捕获阶段」和「冒泡阶段」，捕获阶段是从外层元素到目标元素的过程，冒泡阶段则相反。我们可以在捕获阶段添加阻止事件，这样就能优先于Vue的冒泡阶段事件执行，从而彻底拦截点击行为。

另外，你的代码只处理了<a>标签，我们还要加上<button>的判断。

完整的指令代码 #

Vue.directive('noclick', {
  bind(elem, binding, vnode) {
    // 模拟你的权限判断逻辑
    const user = { name: 'John Doe' };
    const hasAccess = false; // 假设当前用户无权限

    if (user && !hasAccess) {
      // 匹配<a>和<button>标签（tagName是大写的）
      if (['A', 'BUTTON'].includes(elem.tagName)) {
        // 第三个参数设为true，在捕获阶段执行事件
        elem.addEventListener('click', (event) => {
          event.stopPropagation(); // 阻止事件冒泡
          event.preventDefault(); // 阻止默认行为（比如<a>的跳转）
          event.stopImmediatePropagation(); // 阻止同元素后续的事件执行
          return false;
        }, true);
      }
    }
  }
});

对应的HTML使用 #

<!-- <a>标签示例 -->
<a @click="displayModal()" v-noclick> I'm a link </a>

<!-- <button>标签示例 -->
<button @click="submitForm()" v-noclick> Submit </button>

关键说明 #

1. 捕获阶段执行：通过addEventListener的第三个参数true，让我们的阻止逻辑在捕获阶段先触发，比Vue的冒泡阶段事件更早执行，确保@click绑定的方法不会被调用。
2. 标签匹配：用['A', 'BUTTON'].includes(elem.tagName)同时处理两种标签，注意tagName返回的是大写字符串。
3. 权限判断：保留了你原有的用户和权限逻辑，你可以根据实际需求调整hasAccess的判断条件。

这样修改后，当用户无权限时，点击<a>或<button>就会被指令拦截，既不会触发Vue绑定的点击方法，也不会执行<a>的默认跳转行为。

内容的提问来源于stack exchange，提问作者PenAndPapers