DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript 對任意元素,自定義右鍵菜單的實現方法
JavaScript 對任意元素,自定義右鍵菜單的實現方法
編輯: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);
  }
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved