您的位置 首页 > 数码极客

【鼠标右键菜单怎么设置】如何自定义你的鼠标右键效果?

Context Menu是与用户交互的简单菜单,如右键单击效果。

在网页上单击右键可以显示页面源码;在图片上右键会出现“保存至本地”,“另存为”等操作。

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

自定义右键效果

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

自定义鼠标右键

自定义右键实现

  • 页面构建

首先看下页面上的代码

页面代码

  • 右键自定义菜单

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

自定义右键菜单

  • 需要用到的变量和方法

变量与方法

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

添加鼠标右键事件

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

判断点击位置

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

左键单击,隐藏菜单

  • 按下ESC键,隐藏菜单

按下ESC键,隐藏菜单

  • 显示自定义菜单

显示自定义菜单

  • 隐藏自定义菜单

隐藏自定义菜单

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

返回具体点的坐标

  • 自定义菜单的位置

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

自定义菜单位置

总结

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

关于作者: admin

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐