自定义鼠标右击菜单要素：

  1. 禁止页面默认右击事件
  2. 设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）
  3. 鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）

效果图

代码如下：

HTML代码

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">

 8     <title>Document</title>

 9     <link rel="stylesheet" type="text/css" href="right-click.css" />

10 </head>

11

12 <body>

13

14     <div class="contain" id="contain-friend">右击显示菜单</div>

15     <label id="label1"></label>

16     <div id="menu-friend" class="menu">

17         <div class="menu-item">

18             <button class="menu-item-btn" id="btn1">菜单一</button>

19         </div>

20         <div class="menu-item">

21             <button class="menu-item-btn" id="btn2">菜单二</button>

22         </div>

23

24     </div>

25     <script src="right-click.js"></script>

26 </body>

27

28 </html>

HTML

JS代码

　　关于菜单的定位主要是在第一个if语句部分，后面为验证按钮效果。

　　menu1.style.left和menu1.style.top用于对菜单进行定位，由css样式表可知menu1的position属性定位为absolute，style.top定位相对于离它最近的position属性值不为static的父辈元素，此处即为body。

　　menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它，此处加上document.documentElement.scrollTop是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。

1 window.onload = function() {

 2     //以下为自定义右击菜单

 3     document.oncontextmenu = function(e) {

 4         //阻止执行浏览器默认右击事件

 5         e.preventDefault();

 6         //聊天室好友列表

 7         if (document.getElementById("menu-friend")) {

 8             var menu1 = document.getElementById("menu-friend");

 9             menu1.style.display = "block";

10             document.getElementById("contain-friend").onmousedown = function(e) {　　　　　 //菜单定位

11                 menu1.style.left = e.offsetX + "px";

12                 menu1.style.top = document.documentElement.scrollTop + e.clientY + "px";

13                 //alert(menu1.style.top)

14                 if (document.getElementById("contain-friend")) {

15                     if (e.button == 2) {

16                         menu1.style.visibility = "visible";

17                     } else {

18                         menu1.style.visibility = "hidden";

19                     }

20                 }

21             }

22         }

23     }

24     if (document.getElementById("btn1")) {

25         document.getElementById("btn1").onmousedown = function(e) {

26             document.getElementById("label1").innerHTML = "你点击了菜单一"

27         }

28     }

29     if (document.getElementById("btn2")) {

30         document.getElementById("btn2").onmousedown = function(e) {

31             document.getElementById("label1").innerHTML = "你点击了菜单二"

32         }

33     }

34     return false;

35     //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行

36 }

JavaScript文件

CSS样式表

/*自定义右击菜单*/

 2

 3 .contain {

 4     background-color: #D1CEBC;

 5     height: 100px;

 6     width: 300px;

 7 }

 8

 9 .menu {

10     width: 150px;

11     background-color: white;

12     visibility: hidden;

13     position: absolute;

14     box-shadow: 0px 0px 10px #D1CEBC

15 }

16

17 .menu-item {

18     background-color: #fff;

19     margin:;

20 }

21

22 .menu-item-btn {

23     width: 146px;

24     margin: 2px;

25     border:;

26     text-align: left;

27     padding-left: 60px;

28     padding-top: 5px;

29     padding-bottom: 5px;

30     background-color: #fff;

31     color: #000;

32 }

33

34 .menu-item-btn:hover {

35     background-color: #D1CEBC;

36 }

CSS样式表

JS自定义鼠标右击菜单的更多相关文章

  1. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  2. 自定义Windows右击菜单调用Winform程序

    U9_Git中ignore文件处理 背景 U9代码中有许多自动生成的文件,不需要上传Git必须BE Entity中的.target文件 .bak 文件 Enum.cs结尾的文件,还有许多 extand ...

  3. JavaScript自定义鼠标右键菜单

    下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...

  4. JQuery模拟网页中自定义鼠标右键菜单

    题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...

  5. 网页里如何使用js屏蔽鼠标右击事件

    图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...

  6. jq自定义鼠标右键菜单

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. 网页开发利用jq自定义鼠标右击事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Win10 自定义鼠标右键菜单

    1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...

  9. Win7如何自定义鼠标右键菜单 添加用记事本打开

    鼠标右键用记事本打开.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Notepad] @="用记事本 ...

随机推荐

  1. 我的mac下有关php扩展的安装

    之前安装yaf和mcrypt扩展一直失败,今天终于找到原因了.那是因为./configure的时候没有指定php版本,所以用了默认的php的版本,正确的姿势应该是:./configure --with ...

  2. NET CORE 2.0发布在IIS上提示502.5错误

    在装了WindowsHosting和NET CORE SDK后,如果没有重启服务器,访问站点报以上错误,解决办法要么重启,要么执行以下两条命令: net stop was /y net start w ...

  3. docker与虚拟机的区别

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  4. JavaSE基础知识（5）—面向对象（对象数组和对象关联）

    一.对象数组 1.说明 数组的定义类型为对象类型 2.动态初始化 1.声明并开辟空间 Person[] pers = new Person[长度];2.赋值 for(int i=0;i<pers ...

  5. 如何用命令将本地项目上传到git[z]

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  6. srs之深入浅出看流媒体

    本文转载:https://blog.csdn.net/zjqlovell/article/details/50786040 CDN这几年爆炸式增长,带宽提速是根源,而HTTP始终还是那个屌样,因此目前 ...

  7. HTML5学习路线导航

    一.基本标签元素 1.基础标签第一篇 2.基础标签第二篇 3.表单form的使用 4.新增表单验证 二.CSS样式表 4.CSS插入样式表的三种格式 5.六大选择器 6.样式内容详细讲解 7.背景渐进 ...

  8. 00.pt-toolkit 目录

    一. 好用便利的工具,常用 pt-align 对齐文本格式pt-archiver 循序渐进的归档表,删除表,迁移数据pt-config-diff 对比不同配置文件.服务器配置参数pt-diskstat ...

  9. Vue+Webpack构建移动端京东金融（一、开发前准备）

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...

  10. UVA 2290 Transmitters

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...