[技术博客]前端右键菜单的实现
在TexrMarking项目开发过程中，需要实现右键菜单对实体进行删除、修改功能。
![[技术博客]前端右键菜单的实现_第1张图片](http://img.e-com-net.com/image/info8/d6e77e39b11142f196039582edb2b3be.jpg)
在此我记录下关于右键菜单的实现。
HTML contextmenu 属性
首先我们来介绍Firefox浏览器特有的contextmenu属性。
contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。
contextmenu 属性的值是需要打开的
元素的 id。但是在具体实现过程中，contextmenu属性并不能很好地适应我们项目的要求。同时，contextmenu属性只适应firefox浏览器，在兼容性上也有很大的问题。总的来说contextmenu不能解决我们的问题。
使用JS制作右键菜单
首先是html的结构：
这里按照谷歌浏览器默认的右键菜单来进行布局
在写CSS文件时需要注意，.rightmenu设置display：none是因为右键菜单本身是隐藏了因为点击了才出现，倘若不加这句，菜单会出现在页面的左上角
JS实现
首先将浏览器的右键默认行为关闭。接下来设置右键行为，左箭可以取消掉右键菜单。
这样的功能并不完善，需要给每一个li写一个BOM事件，这里进行了省略。
这样实现起来还是比较麻烦的。因为我们在Graph中使用了EChart，所以我接着去查看EChart的菜单实现方法。
EChart添加右键点击菜单
新增'CONTEXTMENU'事件：
var ZR_EVENT_LISTENS = [
'CLICK',
'DBLCLICK',
'CONTEXTMENU',
'MOUSEOVER',
'MOUSEOUT',
'DRAGSTART',
'DRAGEND',
'DRAGENTER',
'DRAGOVER',
'DRAGLEAVE',
'DROP'
];
_oncontextmenu: function (param) {
//if(arguments[0].event.button == '2'){
// callChartListMethodReverse(this, 'onmousedown', param);
if (param.target) {
var ecData = this._eventPackage(param.target);
if (ecData && ecData.seriesIndex != null) {
this._messageCenter.dispatch(ecConfig.EVENT.CONTEXTMENU, param.event, ecData, this);
}
}
//}
},
现在对界面文件进行一些说明，下面模拟了某些血缘分析的静态数据（项目是从后台查出的，这里就只能随便模拟一些数据看效果了），准备一个div，用来定义右键菜单：
-
血缘分析
-
影响分析
声明使用到右键菜单事件：
function rightBt(param){
var menu = document.getElementById("menuuu");
var event = param.event;
var pageX = event.pageX;
var pageY = event.pageY;
menu.style.left = pageX + 'px';
menu.style.top = pageY + 'px';
menu.style.display = "block";
}
//myChart.on(ecConfig.EVENT.CLICK, focus);
//myChart.on(ecConfig.EVENT.MOUSEDOWN, rightBt);
myChart.on(ecConfig.EVENT.CONTEXTMENU, rightBt);
以上就是demo的源码，效果如下：
基本符合项目的要求
参考资料
https://www.runoob.com/tags/att-global-contextmenu.html
https://www.cnblogs.com/ilinuxer/p/5281525.html
https://www.jianshu.com/p/2f6c9266d14c