首頁 > web前端 > js教程 > JavaScript 對任意元素,自訂右鍵選單的實作方法_基礎知識

JavaScript 對任意元素,自訂右鍵選單的實作方法_基礎知識

WBOY
發布: 2016-05-16 17:34:04
原創
1229 人瀏覽過

一、一些概念:

  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);
  }
}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板