JS如何實(shí)現(xiàn)自定義右鍵菜單

這篇文章主要介紹了JS如何實(shí)現(xiàn)自定義右鍵菜單，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

示例：

<div id="menu" ></menu>

假設(shè)我要把上面這個(gè)div設(shè)置為右鍵菜單，先隨意美化一下。

原理就是利用contextmenu事件，右鍵點(diǎn)擊時(shí)，會(huì)觸發(fā)這個(gè)事件時(shí)，該事件對(duì)象可以獲得鼠標(biāo)距離頁(yè)面左上角的距離clientX和clientY，

我們可以利用這兩個(gè)屬性，來(lái)控制div的水平，垂直偏移量，并且返回false，取消事件的默認(rèn)行為，來(lái)模擬瀏覽器的右鍵菜單。

document.oncontextmenu=function(e){

　　var x=e.clientX+'px';

　　var y=e.clientY+'px';

　　var node=document.querySelector('#menu');

　　node.style.left=x;

　　node.style.top=y;

　　node.style.width=100+'px';

　　node.style.height=100+'px';

　　return false; //很重要，不能讓瀏覽器顯示自己的右鍵菜單

}

現(xiàn)在是關(guān)閉部分，關(guān)閉右鍵菜單的方式，通常是在空白區(qū)域點(diǎn)擊左鍵。

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

這僅僅是一個(gè)基本的思路的，核心就是contextmenu事件。你可以在此基礎(chǔ)上使用CSS隨意美化升級(jí)，加入類(lèi)似于transition等屬性，來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS如何實(shí)現(xiàn)自定義右鍵菜單”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!