這篇“JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫(xiě)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫(xiě)”文章吧。
創(chuàng)新互聯(lián)建站專(zhuān)注于東湖網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供東湖營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，東湖網(wǎng)站制作、東湖網(wǎng)頁(yè)設(shè)計(jì)、東湖網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造東湖網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供東湖網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
代碼如下：
HTML代碼
HTML
JS代碼
關(guān)于菜單的定位主要是在第一個(gè)if語(yǔ)句部分，后面為驗(yàn)證按鈕效果。
menu1.style.left和menu1.style.top用于對(duì)菜單進(jìn)行定位，由css樣式表可知menu1的position屬性定位為absolute，style.top定位相對(duì)于離它最近的position屬性值不為static的父輩元素，此處即為body。
menu的位置需要根據(jù)頁(yè)面布局的具體情況來(lái)判斷是e.offsetX/Y、e.clientX/Y或是其它，此處加上document.documentElement.scrollTop是考慮加上滾動(dòng)條的情況（實(shí)際上這個(gè)例子里面并沒(méi)有滾動(dòng)條）。
window.onload=function(){
//以下為自定義右擊菜單
document.oncontextmenu=function(e){
//阻止執(zhí)行瀏覽器默認(rèn)右擊事件
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="你點(diǎn)擊了菜單一"
}
}
if(document.getElementById("btn2")){
document.getElementById("btn2").onmousedown=function(e){
document.getElementById("label1").innerHTML="你點(diǎn)擊了菜單二"
}
}
returnfalse;
//與e.preventDefault();功能相同，但是必須放在最后否則在return后面的內(nèi)容均不執(zhí)行
}
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;
}
以上就是關(guān)于“JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫(xiě)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
