JS自定义鼠标右击菜单
自定义鼠标右击菜单要素：
- 禁止页面默认右击事件
- 设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）
- 鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）
效果图
代码如下：
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自定义鼠标右击菜单的更多相关文章
- js自定义鼠标右键菜单
document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...
- 自定义Windows右击菜单调用Winform程序
U9_Git中ignore文件处理 背景 U9代码中有许多自动生成的文件,不需要上传Git必须BE Entity中的.target文件 .bak 文件 Enum.cs结尾的文件,还有许多 extand ...
- JavaScript自定义鼠标右键菜单
下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...
- JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
- 网页里如何使用js屏蔽鼠标右击事件
图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...
- jq自定义鼠标右键菜单
效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 网页开发利用jq自定义鼠标右击事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Win10 自定义鼠标右键菜单
1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...
- Win7如何自定义鼠标右键菜单 添加用记事本打开
鼠标右键用记事本打开.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Notepad] @="用记事本 ...
随机推荐
- 简单的页面互点Javascript代码
简单的页面互点Javascript代码,可以适用于前端$(function(){ $('.ip_b_con_item li,.pro_index_list li').mouseover(functio ...
- mysql学习笔记--数据库事务
一.概念 1. 事务是一个不可分割的单元 2. 事务作为一个整体要么一起执行,要么一起回滚 二.事务操作 1. 开启事务 start transaction 或者begin [work] 2. 提交事 ...
- Ubuntu16.04 使用lvm挂载硬盘以及扩容
1.首先通过fdisk -l 查看磁盘的属性,找到要添加的磁盘名称(Disk /dev/sda) 2.使用fdisk将磁盘进行逻辑分区 fdisk /dev/sda m来查看命令帮助 n添加一张新的p ...
- crm开发之用户ModelForm定制和密码加密
写了这么多的定制 功能.终于可以定制一下了!因为是 stark 和 rbac 两个组建. 一起使用. 所以在这里,再记录一下.需要注意的点: 先放出 目录结构: 先从 stark 开始.使用star ...
- 新建VS工程与填坑：解决方案与项目不在同一目录
A.新建项目->空工程 B.添加依赖库 1.属性->C/C++->附加包含目录 注:添加头文件目录,必须指向子文件夹 2.属性->链接器->常规->附加库目录 注: ...
- 部署代码review和CI
公司原先搭了一个代码Review的服务器,由于历史原因,装的是一个32bit的Ubuntu系统,后来由于需要,需要安装gitlab,由于gitlab需要64位系统,所以临时凑合了个vagrant,本质 ...
- 初学html，任务2：写一个简单的登陆/注册界面
先在body中把最基础的标签写出来 现在页面运行出来是这样的 就是一个没有任何样式的基础界面: 接下来我们为这些标签加上样式 首先还是让页面所有元素的padding和margin都设置为0, 清除浏览 ...
- 印度视觉设计师Rishab平面设计作品，简直太美了！
来自印度的视觉设计师Rishab Jindal(@iamrishabjindal) 你别以为仅仅是视觉上吸引你眼球. 其实融入和宗教和z哲学. 你慢慢品味一下. 这张有点意思 有一种末日丧尸围城的氛围 ...
- logstash 默认时间少8小时的修改办法
logstash 的配置文件添加 filter { ruby { code => "event.set('timestamp', event.get('@timestamp').tim ...
- CSL的字符串
链接:https://ac.nowcoder.com/acm/contest/551/D 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言1048 ...