JS如何實現(xiàn)自定義鼠標(biāo)右擊菜單

1、js如何實現(xiàn)自定義鼠標(biāo)右擊菜單代碼如下：html代碼document右擊顯示菜單菜單一菜單二htmljs代碼關(guān)于菜單的定位主要是在第一個if語句部分，后面為驗證按鈕效果。menu1.style.left和menu1.style.top用于對菜單舉行定位，由css樣式表可知menu1的position屬性定位為absolute，style.top定位相對于離它最近的position屬性值不為static的父輩元素，此處即為body。menu的位置需要按照頁面布局的詳細(xì)狀況來推斷是e.offsetx/y、e.clientx/y或是其它，此處加上document.documentelement.sc

2、rolltop是考慮加上滾動條的狀況（事實上這個例子里面并沒有滾動條）。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

3、.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.visibilit

4、y="visible"elsemenu1.style.visibility="hidden"if(document.getelementbyid("btn1")document.getelementbyid("btn1").onmousedown=function(e)document.getelementbyid("label1").innerhtml="你點擊了菜單一"if(document.getelementbyid("btn2")document

5、.getelementbyid("btn2").onmousedown=function(e)document.getelementbyid("label1").innerhtml="你點擊了菜單二"returnfalse;/與e.preventdefault();功能相同，但是必需放在最后否則在return后面的內(nèi)容均不執(zhí)行javascript文件css樣式表1/*自定義右擊菜單*/.containbackground-color:d1cebc;height:100px;width:300px;.menuwidth:150px;background-color:white;visibility:hidden;position:absolute;box-shadow:0px0px10pxd1cebc.menu-itembackground-color:fff;margin:0;.menu-item-btnwidth:146px;margin:2px;border:0;text-align:left;padding-left:60px;padding-top:5px;padding-bottom:5px;back