溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫

發(fā)布時間：2022-03-14 17:22:28 來源：億速云 閱讀：192 作者：iii 欄目：web開發(fā)

這篇“JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JS實(shí)現(xiàn)自定義鼠標(biāo)右擊菜單的代碼怎么寫”文章吧。

　　代碼如下：

　　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代碼

　　關(guān)于菜單的定位主要是在第一個if語句部分，后面為驗(yàn)證按鈕效果。

　　menu1.style.left和menu1.style.top用于對菜單進(jìn)行定位，由css樣式表可知menu1的position屬性定位為absolute，style.top定位相對于離它最近的position屬性值不為static的父輩元素，此處即為body。

　　menu的位置需要根據(jù)頁面布局的具體情況來判斷是e.offsetX/Y、e.clientX/Y或是其它，此處加上document.documentElement.scrollTop是考慮加上滾動條的情況（實(shí)際上這個例子里面并沒有滾動條）。

　　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)右擊菜單的代碼怎么寫”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手