JS实现自定义鼠标右击菜单的代码怎么写

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;

}

以上就是关于“JS实现自定义鼠标右击菜单的代码怎么写”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。