vue.js - vue 2 自定义指令根据权限判断是否阻止事件执行？不生效？

Question

// 注册自定义指令
Vue.directive('permission', {
  bind(el, binding, vnode) {
    const { value } = binding; // value 是权限检查函数
    const eventType = binding.arg || 'click';
    
    // 事件处理函数
    const eventHandler = (event) => {
      if (!value()) { // 调用权限检查函数
        event.stopImmediatePropagation(); // 阻止事件的进一步传播
        // 如果需要，可以在这里显示提示信息
        console.log('Access denied');
      }
    };

    // 绑定事件处理函数
    el.addEventListener(eventType, eventHandler);

    // 存储事件处理函数以便于以后移除
    el.__vueEventHandler__ = eventHandler;
  },
  unbind(el, binding) {
    const eventType = binding.arg || 'click';
    if (el.__vueEventHandler__) {
      el.removeEventListener(eventType, el.__vueEventHandler__);
      delete el.__vueEventHandler__;
    }
  }
});

在组件中使用 <div v-cclick:click="false" @click="aaaaaa">5555555555</div>

aaaaaa 还是会调用这里 console.log('Access denied')也打印了，但是aaaaaa还是会执行，应该怎么改呢？

Answer 1

Event.stopPropagation 阻止捕获和冒泡阶段中当前事件的进一步传播

Event.stopImmediatePropagation 阻止监听同一事件的其他事件监听器被调用

事件监听器按被添加的顺序被调用，例如：当添加监听器 A, B, C, D，他们将被依次执行。如果你在 B 中调用 stopImmediatePropagation，那么它将阻止 C 和 D 的调用。