溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“JS實現自定義鼠標右擊菜單的代碼怎么寫”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JS實現自定義鼠標右擊菜單的代碼怎么寫”文章吧。
代碼如下：
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;
}
以上就是關于“JS實現自定義鼠標右擊菜單的代碼怎么寫”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
