JS簡單實現自訂右鍵菜單

標籤：tar   定義   blog   class   osi   top   div   click   node   

RT，一個簡單的例子，僅僅講述原理

 

<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

 

假設我要把上面這個div設定為右鍵菜單，先隨意美化一下。

原理就是利用contextmenu事件，右鍵點擊時，會觸發這個事件時，該事件對象可以獲得滑鼠距離頁面左上方的距離clientX和clientY，

我們可以利用這兩個屬性，來控制div的水平，垂直位移量，並且返回false，取消事件的預設行為，來類比瀏覽器的右鍵菜單。

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; //很重要，不能讓瀏覽器顯示自己的右鍵菜單}

現在是關閉部分，關閉右鍵菜單的方式，通常是在空白地區點擊左鍵。

document.onclick=function(e){　　if(e.target.id!=‘menu‘)　　{　　　　var node=document.querySelector(‘#menu‘);　　　　node.style.width=0;　　　　node.style.height=0;　　}}

這僅僅是一個基本的思路的，核心就是contextmenu事件。你可以在此基礎上使用CSS隨意美化升級，加入類似於transition等屬性，來實現動畫效果。

 

如果你喜歡我的文章，不要忘記點個贊哦！ (￣▽￣)~(￣▽￣)~

JS簡單實現自訂右鍵菜單