Context Menu是一个与用户进行友好交互的菜单，例如鼠标的右键产生的效果。在网页上单击右键可以显示页面源码；在图片上右键会出现“保存至本地”，“另存为”等操作。

当然我们还可以自定义鼠标右键事件，今天我们就一起来学习下如何用原生的Javascript自定义鼠标右键事件。

自定义右键效果

首先我们来看下自定义鼠标右键的效果，通过单击右键会出现自定义的内容，而且绑定了click事件

自定义鼠标右键

自定义右键实现

• 页面构建

首先看下页面上的代码

页面代码

• 右键自定义菜单

单击右键出现的菜单其实也是一段html代码，如下所示

自定义右键菜单

• 需要用到的变量和方法

变量与方法

• 添加右键事件-事件委托

添加鼠标右键事件

• 判断点击位置是否位于li内部

判断点击位置

• 鼠标左键单击，隐藏菜单

左键单击，隐藏菜单

• 按下ESC键，隐藏菜单

按下ESC键，隐藏菜单

• 显示自定义菜单

显示自定义菜单

• 隐藏自定义菜单

隐藏自定义菜单

• 根据事件触发位置返回具体点的坐标

返回具体点的坐标

• 自定义菜单的位置

因为在鼠标右键单击的时候，菜单要出现在鼠标单击的位置，因此需要计算出菜单栏出现的位置

自定义菜单位置

总结

上述就是完成自定义右键效果的核心代码，关于样式的代码大家可以自行设计，如果成功了就会出现文章开始的右键效果。