鼠标右键可以实现的功能有：如何自定义你的鼠标右键效果

鼠标右键可以实现的功能有：如何自定义你的鼠标右键效果自定义右键菜单单击右键出现的菜单其实也是一段html代码，如下所示页面构建首先看下页面上的代码右键自定义菜单

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

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

自定义右键效果

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

自定义鼠标右键

自定义右键实现

• 页面构建

首先看下页面上的代码

右键自定义菜单

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

自定义右键菜单

• 需要用到的变量和方法

变量与方法

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

添加鼠标右键事件

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

判断点击位置

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

左键单击，隐藏菜单

• 按下ESC键，隐藏菜单

按下ESC键，隐藏菜单

• 显示自定义菜单

显示自定义菜单

• 隐藏自定义菜单

隐藏自定义菜单

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

返回具体点的坐标

• 自定义菜单的位置

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

自定义菜单位置

总结

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