首页 / 知识
JS如何实现自定义鼠标右击菜单
2023-04-11 15:09:00
代码如下：
HTML代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<linkrel="stylesheet"type="text/css"href="right-click.css"/>
</head>
<body>
<divid="contain-friend">右击显示菜单</div>
<labelid="label1"></label>
<divid="menu-friend">
<div>
<buttonid="btn1">菜单一</button>
</div>
<div>
<buttonid="btn2">菜单二</button>
</div>
</div>
<scriptsrc="right-click.js"></script>
</body>
</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是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。
window.onload=function(){
//以下为自定义右击菜单
document.oncontextmenu=function(e){
//阻止执行浏览器默认右击事件
e.preventDefault();
//聊天室好友列表
if(document.getElementById("menu-friend")){
varmenu1=document.getElementById("menu-friend");
menu1.style.display="block";
document.getElementById("contain-friend").onmousedown=function(e){//菜单定位
menu1.style.left=e.offsetX+"px";
menu1.style.top=document.documentElement.scrollTop+e.clientY+"px";
//alert(menu1.style.top)
if(document.getElementById("contain-friend")){
if(e.button==2){
menu1.style.visibility="visible";
}else{
menu1.style.visibility="hidden";
}
}
}
}
}
if(document.getElementById("btn1")){
document.getElementById("btn1").onmousedown=function(e){
document.getElementById("label1").innerHTML="你点击了菜单一"
}
}
if(document.getElementById("btn2")){
document.getElementById("btn2").onmousedown=function(e){
document.getElementById("label1").innerHTML="你点击了菜单二"
}
}
returnfalse;
//与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行
}
JavaScript文件
CSS样式表
1/*自定义右击菜单*/
.contain{
background-color:#D1CEBC;
height:100px;
width:300px;
}
.menu{
width:150px;
background-color:white;
visibility:hidden;
position:absolute;
box-shadow:0px0px10px#D1CEBC
}
.menu-item{
background-color:#fff;
margin:0;
}
.menu-item-btn{
width:146px;
margin:2px;
border:0;
text-align:left;
padding-left:60px;
padding-top:5px;
padding-bottom:5px;
background-color:#fff;
color:#000;
}
.menu-item-btn:hover{
background-color:#D1CEBC;
}
本文转载自中文网 |
最新内容
相关内容
python如何读取列表中元素的位置?
python如何读取列表中元素的位置?，位置，数据，异常，培训，字符串，元素，索引，方法，示例，结果，python读取列表中元素位置的方法：1、使用index()方
python3如何引入模块?
python3如何引入模块?，系统，位置，培训，标准，模块，方法，成员，路径，下面，别名，使用Python进行编程时，有些功能没必须自己实现，可以借助Python现有
python如何replace(替换)多个字符?
python如何replace(替换)多个字符?，培训，字符，字符串，方法，正则，括号，数组，函数，定义，以上，python中使用replace替换多个字符的方法：1、使用re
python如何导入txt数据库?
python如何导入txt数据库?，数据，时间，代码，培训，数据库，函数，读数，数据表，以上，方法，python将TXT数据导入数据库的方法代码如下：#!/usr/bin/py
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件python里小数如何表述?
python里小数如何表述?，银行，培训，小数，位数，问题，精度，表示，以上，存在，更多，1、Python中的小数存在精度问题：>>>0.1+0.1+0.1-0.35.5511151231
python如何去空格和回车?
python如何去空格和回车?，培训，空格，方法，字符串，两端，以上，更多，内容，python去掉空格和回车的方法：1、使用strip()、lstrip()、rstrip()等
python如何做可视化界面?
python如何做可视化界面?，代码，标准，培训，函数，界面，控件，文件，按钮，以上，编辑，python创建可视化界面步骤：1、首先，创建一个.py文件，暂命名为PyQ
pdf如何用python读取?
pdf如何用python读取?，数据，培训，代码，文件，内容，共享资源，图像，命令，字体，以上，python中可以使用pdfminer库来读取PDF文件中的内容。安装命
python如何创建空数组?
python如何创建空数组?，数据，培训，数组，形状，列表，对象，参数，方式，嵌套，初始化，python创建空数组的三种方式：1、numpy指定形状为0实际上，empty
python如何让程序暂停执行和继续执
python如何让程序暂停执行和继续执行?，暂停，培训，程序，继续，空格键，函数，以上，操作，方法，更多，python让程序继续执行的方法：一、使用到的函数
如何在python代码中指定保存的文件
如何在python代码中指定保存的文件格式，代码，培训，文件格式，格式，二进制文件，文件，后缀，以上，方法，更多，python指定保存文件格式的方法：1、保