vue 子元素捕获导致其 click 事件被父元素 mousedown 事件“屏蔽掉”的问题

今天在做产品的时候，碰到一个需要添加右键菜单的功能。

本来一般碰到这种问题，都是直接找找看下有没有类似的插件，毕竟比较省心，但是缺点是，需要小小的看下代码，学下api。

但是找了一圈，弹出框有不少优秀的开源插件，但是右键菜单还真是没找到合适的啊，找到几个，用的人特别少，看了下代码，感觉还不如自己开发一个。毕竟用的 vue，写起来也不是太过于繁琐。

于是说干就干，经过一段时间的劈里啪啦的奋战，终于初具雏形了。

但是问题是，要做成可以配置的，那么总得配上对应的 click 事件吧，于是问题就来了。

右键菜单是通过在父 dom 上添加 mousedown 事件唤出来的，右键菜单的子项，是通过列表循环创建出来的，大致结构为这样：

<template>
  <div @mousedown.stop.prevent="mousedownHandler">
    <div class="canvas"></div>
    <ul class="menu" v-show="isMenuShow">
      <li
        v-for="(item, key) in menuList"
        v-bind:key="key"
        @click="item.clickFunc(item)"
      >
        {{ item.items[item.cur] }}
      </li>
    </ul>
  </div>
</template>

我通过判断点击的是不是右键，来动态的改变 isMenuShow 的 true/false，代码如下(代码为节选)：

...
mousedownHandler(e) {
  const { button } = e;
  if (button === 2) {
    const { offsetX: x, offsetY: y } = e;
    // 设置菜单的位置
    setLocation(this.getMenu(), { x, y });
    // 显示菜单
    this.showMenu();
    return;
  }
  this.hiddenMenu();
},

hiddenMenu() {
  this.isMenuShow = false;
},

showMenu() {
  this.isMenuShow = true;
},
...

可以看到，我的思路是，当我在父 wrapper 中点击的右键的时候，将会弹出右键菜单，否则会将其隐藏掉。

问题就出现在这里。

<li
  v-for="(item, key) in menuList"
  v-bind:key="key"
  @click="item.clickFunc(item)"
>
  {{ item.items[item.cur] }}
</li>

从这段代码可以看出来，我在每个 li 中都添加了一个点击事件，但是写完以后，调试的时候，却发现运行起来没有效果。

开始的时候，我怀疑是不是我添加事件的方式添加错了，于是我仔细的去研究了下 vue 的官方文档：https://cn.vuejs.org/v2/api/#v-on

改了各种写法均未果，甚至我一度怀疑，是不是循环的时候，不能传入方法进来。

最后，等到我百思不得其解，就快要放弃的时候，突然灵机一动：是不是子元素 li 上的事件根本没有被点击到，也就是说根本没有被触发呢？所以才导致，点击的这段逻辑始终无法执行。

于是我注释掉下面这行代码：

注释掉以后，终于发现，传入的点击事件可以正常执行了。

所以原因也找到了：父元素的 mousedown 事件在点击按钮的时候先执行了，因为我没用右键点击，导致执行了 hiddenMenu() 方法，将右键菜单隐藏起来了。

既然这个时候，右键菜单都已经被隐藏起来了，想触发右键菜单的点击事件当然是无果的。

因此，找到问题了以后，下一步就是尝试解决这个问题了。

下面是我解决这个问题的方案：

...
mousedownHandler(e) {
  const { button } = e;
  if (button === 2) {
    const { offsetX: x, offsetY: y } = e;
    // 设置菜单的位置
    setLocation(this.getMenu(), { x, y });
    // 显示菜单
    this.showMenu();
    return;
  }
  if (e.target.tagName.toLocaleLowerCase() !== 'li') {
    this.hiddenMenu();
  } else {
    setTimeout(() => {
      this.hiddenMenu();
    }, 200);
  }
},
...

原理就是，通过判断点击事件传过来的目标元素，是否为 li 元素，来决定是否延时执行 hiddenMenu 方法。

之前本来不打算用定时器的，但是后来觉得，右键菜单点击完以后，本来就是需要隐藏掉的，直接在这里处理，不是一举多得么。

这个问题，其实将右键菜单的 dom 直接挂在 body 上面也能避免掉，因为不是父子关系，点击子元素的时候，就不会因为事件捕获导致出现了这个问题了。