JQuery模擬實現(xiàn)網(wǎng)頁中自定義鼠標(biāo)右鍵菜單功能

更新時間：2018年11月14日 14:02:43 作者：粥里有勺糖

這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實現(xiàn)網(wǎng)頁中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

題外話.......最近在開發(fā)一個網(wǎng)站項目的時候,需要用到網(wǎng)頁自定義右鍵菜單,在網(wǎng)上看了各路前輩大神的操作,頭暈?zāi)垦?為了達到目的,突然靈機一動,于是便有了這篇文章.

先放個效果圖(沾沾自喜,大神勿噴):

廢話不多說,進入正題:

1.首先我們要禁用掉原網(wǎng)頁中右鍵菜單

//JQuery代碼
$(selector).on('contextmenu', function () {
     return false;
})

這樣目標(biāo)區(qū)域的右鍵菜單就無法使用了

demo1:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="description" content="">
 <meta name="keywords" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <style>
  #demo1 {
   display: block;
   background-color: turquoise;
   color: #fff;
   font-size: 100px;
   text-align: center;
   width: 100%;
   height: 500px;
  }
 </style>
</head>
<div id="demo1">
<p>此區(qū)域(帶顏色)被禁用了右鍵菜單</p>
</div>

<body>
 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script>
  $('#demo1').on('contextmenu',function () {//禁用掉#demo1的右鍵菜單
   return false;
  })
 </script>
</body>

</html>

2.接下來開始編寫我們自己的菜單彈出窗口

思路:通過捕獲鼠標(biāo)點擊時的事件在屏幕上被觸發(fā)的位置(x,y),然后把我們自己編寫的窗口利用CSS中的"定位"顯示在哪里.

2.1:如何獲取到鼠標(biāo)在屏幕上點擊的事件?

JQuery Event.which屬性---引用JQuery中文手冊中的內(nèi)容

which屬性用于返回觸發(fā)當(dāng)前事件時按下的鍵盤按鍵或鼠標(biāo)按鈕。

對于鍵盤和鼠標(biāo)事件，該屬性用于確定你按下的是哪一個鍵盤按鍵或鼠標(biāo)按鈕。

which屬性對DOM原生的event.keyCode和event.charCode進行了標(biāo)準(zhǔn)化。

適用的事件類型主要有鍵盤事件：keypress、keydown、keyup，以及鼠標(biāo)事件：mouseup、mousedown。

該屬性屬于jQuery的Event對象(實例)

$(selector).on('mousedown',function(event){

var code=event.which;//返回值是一個Number類型

})

event.which屬性值	對應(yīng)的鼠標(biāo)按鈕
1	鼠標(biāo)左鍵
2	鼠標(biāo)中鍵(滾輪鍵)
3	鼠標(biāo)右鍵

 $('#demo1').on('mousedown',function(event){//緊接上面的實例demo1 在script中插入這段代碼即可獲取到鼠標(biāo)點擊事件
 var code=event.which;//判斷是單機了鼠標(biāo)哪個鍵(1,2,3)
 alert('區(qū)域被鼠標(biāo)點擊了---'+code);
 })

2.2 如何獲取事件發(fā)生的位置(X,Y)?

引用一位前輩的:event對象中的屬性:

event.offsetX //設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)
event.offsetY //設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)
event.pageX //設(shè)置或獲取鼠標(biāo)指針位置相對于頁面左上角的 x 坐標(biāo)
event.pageY //設(shè)置或獲取鼠標(biāo)指針位置相對于頁面左上角的 y 坐標(biāo)
event.clientX //設(shè)置或獲取鼠標(biāo)指針位置相對于瀏覽器窗口可視區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條
event.clientY //設(shè)置或獲取鼠標(biāo)指針位置相對于瀏覽器窗口可視區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條
event.screenX //設(shè)置或獲取獲取鼠標(biāo)指針位置相對于屏幕的 x 坐標(biāo)
event.screenY //設(shè)置或獲取鼠標(biāo)指針位置相對于屏幕的 y 坐標(biāo)

在上面的demo1的 js 代碼中 增添 兩句1 $('#demo1').on('mousedown',function(event){
   var code=event.which;
   var x=event.pageX;//相對于頁面左上角X的坐標(biāo)
   var y=event.pageY;//相對于頁面左上角Y的坐標(biāo)
   alert('區(qū)域被點擊了'+code+"位置:"+'('+x+','+y+')');
})

為了方便觀察重新做了一個demo2(復(fù)制粘貼即可運行):

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="description" content="">
 <meta name="keywords" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <style>
  #demo1 {
   display: block;
   background-color: turquoise;
   color: #fff;
   font-size: 100px;
   text-align: center;
   width: 100%;
   height: 500px;
  }
  #click-pos{
   display:block;
   background-color: bisque;
   color: #000;
   margin: 20px;
   float: left;
   min-width: 200px;
   font-size: 20px;
   text-align: center;
  }
 </style>
</head>
<label id="click-pos">
顯示內(nèi)容
</label>
<div id="demo1">
<p>此區(qū)域(帶顏色)被禁用了右鍵菜單</p>
</div>

<body>
 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script>
  //禁用掉區(qū)域的默認(rèn)右鍵事件
  $('#demo1').on('contextmenu',function () {
   return false;
  })

  $('#demo1').on('mousedown',function(event){
   var code=event.which;
   var x=event.pageX;//相對于頁面左上角X的坐標(biāo)
   var y=event.pageY;//相對于頁面左上角Y的坐標(biāo)
   var mouse="";//點擊類型
   switch(code){
    case 1:mouse="左鍵";
    break;
    case 2:mouse="中鍵(滾輪)";
    break;
    case 3:mouse="右鍵";
    break;
    default:break;
   }
   $('#click-pos').html("點擊類型:"+mouse+"--位置-X:"+x+'-Y:'+y);//顯示到頁面上
  })
  
 </script>
</body>

</html>

核心部分差不多就是上面的內(nèi)容

3.編寫自定義菜單

達到的顯示效果:

廢話不多上代碼:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="description" content="">
 <meta name="keywords" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <style>
  #demo1 {
   display: block;
   background-color: turquoise;
   color: #fff;
   font-size: 50px;
   text-align: center;
   width: 100%;
   height: 500px;
  }

  #click-pos {
   display: block;
   background-color: bisque;
   color: #000;
   margin: 20px;
   float: left;
   min-width: 200px;
   font-size: 20px;
   text-align: center;
  }

  /* 右鍵菜單遮罩層 */
  #layer {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: transparent;
  }

  #mouse-menu {
   position: fixed;
   z-index: 5;
   left: 0;
   right: 0;
   width: 130px;
   max-height: 120px;
   overflow: auto;
   display: block;
   background-color: #f1ecec;
   list-style: none;
   padding: 10px;
   text-align: center;
   border-radius: 8px;
   box-shadow: 0 0 4px #ddd;
  }

  /* 菜單的每個選項 */
  #mouse-menu li {
   border-top: 1px solid #000;
  }

  #mouse-menu li:last-child {
   border-bottom: 1px solid #000;
  }

  /* 當(dāng)鼠標(biāo)移入時 */
  #mouse-menu li:hover {
   background-color: deepskyblue;
  }
 </style>
</head>
<label id="click-pos">
 顯示內(nèi)容
</label>
<div id="demo1">
 <p>在此區(qū)域啟用自定義菜單,原菜單已禁用</p>
</div>
<!-- 最外層為遮罩層,用于綁定點擊任意位置關(guān)閉菜單事件 -->
<!-- 默認(rèn)隱藏 -->
<div id="layer" style="display:none">
 <ul id="mouse-menu">
  <li>選項卡1</li>
  <li>選項卡2</li>
  <li>選項卡3</li>
  <li>選項卡4</li>
  <li>選項卡5</li>
  <li>選項卡6</li>
 </ul>
</div>

<body>
 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script>
  //禁用掉區(qū)域的默認(rèn)右鍵事件
  $('#demo1').on('contextmenu', function () {
   return false;
  })
  $('#layer').on('contextmenu', function () {
   return false;
  })

  $('#demo1').on('mousedown', function (event) {
   var code = event.which;
   var x = event.pageX;//相對于頁面左上角X的坐標(biāo)
   var y = event.pageY;//相對于頁面左上角Y的坐標(biāo)
   var mouse = "";//點擊類型
   switch (code) {
    case 1: mouse = "左鍵";
     break;
    case 2: mouse = "中鍵(滾輪)";
     break;
    case 3: mouse = "右鍵";
     break;
    default: break;
   }
   $('#click-pos').html("點擊類型:" + mouse + "--位置-X:" + x + '-Y:' + y);//坐標(biāo)顯示到頁面上

   // 如果是鼠標(biāo)右鍵召喚出彈出菜單
   if (code == 3) {
    $('#layer').show();
    //改變菜單的位置到事件發(fā)生的位置
    $('#mouse-menu').css('left', x);
    $('#mouse-menu').css('top', y);
   }
  })
  // 點擊選項卡時觸發(fā)
  $('#layer').on('click', 'li', function (event) {
   //顯示當(dāng)前點擊的內(nèi)容
   console.log("ssss");
   var text = $(this).html();
   $('#click-pos').html(text);
   // event.stopPropagation();//阻止事件冒泡
  })
  //點擊遮罩層時隱藏需要的菜單
  $('#layer').on('click', function () {
   $(this).hide();
  })

 </script>
</body>

</html>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: