本篇文章主要介紹了JS簡單實作自訂右鍵選單實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
RT，一個簡單的例子，僅僅講述原理
程式碼如下:
<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>
假設我要把上面這個p設定為右鍵選單，先隨意美化一下。
原理就是利用contextmenu事件，當右鍵點擊時，會觸發這個事件時，該事件物件可以獲得滑鼠距離頁面左上角的距離clientX和clientY，
我們可以利用這兩個屬性，來控制p的水平，垂直偏移量，並且傳回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實作的簡單實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
