今天在做产品的时候，碰到需要添加右键菜单的情况。
本来一般碰到这种问题，都是直接找找看下有没有类似的插件，毕竟比较省心，但是缺点是，需要小小的看下代码，学下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 上的事件根本没有被点击到，也就是说根本没有被触发呢？所以才导致，点击的这段逻辑始终无法执行。
于是我注释掉下面这行代码：
image.png
注释掉以后，终于发现，传入的点击事件可以正常执行了。
所以原因也找到了：父元素的 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 上面也能避免掉，因为不是父子关系，点击子元素的时候，就不会因为事件捕获导致出现了这个问题了。
网友评论