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