鲁达 Context Menu是与用户交互的简单菜单，如右键单击效果。
在网页上单击右键可以显示页面源码；在图片上右键会出现“保存至本地”，“另存为”等操作。当然我们还可以自定义鼠标右键事件，今天我们就一起来学习下如何用原生的Javascript自定义鼠标右键事件。
自定义右键效果
首先我们来看下自定义鼠标右键的效果，通过单击右键会出现自定义的内容，而且绑定了click事件
自定义鼠标右键
自定义右键实现
页面构建
首先看下页面上的代码
页面代码
右键自定义菜单
单击右键出现的菜单其实也是一段html代码，如下所示
自定义右键菜单
需要用到的变量和方法
变量与方法
添加右键事件-事件委托
添加鼠标右键事件
判断点击位置是否位于li内部
判断点击位置
鼠标左键单击，隐藏菜单
左键单击，隐藏菜单
按下ESC键，隐藏菜单
按下ESC键，隐藏菜单
显示自定义菜单
显示自定义菜单
隐藏自定义菜单
隐藏自定义菜单
根据事件触发位置返回具体点的坐标
返回具体点的坐标
自定义菜单的位置
因为在鼠标右键单击的时候，菜单要出现在鼠标单击的位置，因此需要计算出菜单栏出现的位置
自定义菜单位置
总结
上述就是完成自定义右键效果的核心代码，关于样式的代码大家可以自行设计，如果成功了就会出现文章开始的右键效果。