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 !
   

        剪切
        剪切
        /a>

        粘貼   

javascript：

複製代碼


程式碼如下:


window.onload=function(){
    rightmenu('p1','d1');
    rightmenu('p1','d1');
}
****
*　　　　　封裝右鍵選單函數：
*　　　　elementID   要自訂右鍵選單的 元素的id
*　 1　　*/
function rightmenu(elementID,menuID){
　　var menu=document.getElementById(menuID);      //取得選單物件
ement〠 /取得點選擁有自訂右鍵的元素
　　element.onmousedown=function(aevent){         //設定該元素的按下滑鼠右鍵右鍵的處理函數　　　　if(aevent.button==2){                   (aevent){
   　　　　if(window.event){
       　　　　aevent=window.event;　　　　　　}else{
　　　　　　　　aevent.preventDefault( );          //對標準DOM 中斷預設點選右鍵事件處理函數
　　　　　　　};
　　　　　　　};
　　》　};; Y 'px;' 'left :' aevent.clientX     //設定滑鼠移出選單時隱藏選單
setTimeout(function(){menu.style.display="none";},400);
　　}
}