JavaScript 對任意元素,自訂右鍵菜單的實現方法

一、一些概念：

　　1、滑鼠事件有一個botton屬性：返回一個整數，用於表示點擊的是哪個滑鼠按鍵。
　　BUG：在IE和標準DOM的滑鼠事件中，唯一一個button屬性值相同的是“單擊右鍵”事件，都返回2。

　　2、事件onmousedown：表示滑鼠按鍵按下的動作。
　　　 事件oncontextmenu：點擊滑鼠觸發的另一個事件。

　　3、中斷預設事件處理函數的方法：IE中設定returnValue=false; 標準DOM中調用preventDefault()方法。

　　4、事件對象：①在IE中，事件對象是window對象的一個event屬性。

　　　　　　　　　　聲明：

　　　　　　　　 ②在標準DOM中，事件對象是事件處理函數的唯一參數。

　　　　　　　　　　聲明：

　　　　　　解決相容性：

二、實現：

HTML：

複製代碼 代碼如下: <p id="p1">Uncle Cat is a fat white cat !</p>
<div id="d1">
<a>剪下</a>
<a>複製</a>
<a>粘貼</a>
</div>

javascript：複製代碼 代碼如下:window.onload=function(){
rightmenu('p1','d1');
}
/****
*　　　　　封裝右鍵菜單函數：
*　　　　elementID 要自訂右鍵菜單的 元素的id
*　　　　menuID　　　 要顯示的右鍵菜單DIv的 id
*/
function rightmenu(elementID,menuID){
　　var menu=document.getElementById(menuID); //擷取菜單對象
　　var element=document.getElementById(elementID);//擷取點擊擁有自訂右鍵的 元素
　　element.onmousedown=function(aevent){ //設定該元素的 按下滑鼠右鍵右鍵的 處理函數
　　　　if(window.event)aevent=window.event; //解決相容性
　　　　if(aevent.button==2){ //當事件屬性button的值為2時，表使用者按下了右鍵
　　　　　　document.oncontextmenu=function(aevent){
　　　　if(window.event){
　　　　aevent=window.event;
　　　　　　　　aevent.returnValue=false; //對IE 中斷 預設點擊右鍵事件處理函數
　　　　　　}else{
　　　　　　　　aevent.preventDefault(); //對標準DOM 中斷 預設點擊右鍵事件處理函數
　　　　　　};
　　　　};
　　　　menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
　　　　//將菜單相對 滑鼠定位
　　　　}
　　}
　　menu.onmouseout=function(){ //設定 滑鼠移出菜單時 隱藏菜單
　　　　setTimeout(function(){menu.style.display="none";},400);
　　}
}