欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年11月14日 14:02:43   作者：粥里有勺糖  
這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

廢話(huà)不多說(shuō),進(jìn)入正題:

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

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

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

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.接下來(lái)開(kāi)始編寫(xiě)我們自己的菜單彈出窗口

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

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

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

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

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

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

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

該屬性屬于jQuery的Event對(duì)象(實(shí)例)

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

var code=event.which;//返回值是一個(gè)Number類(lèi)型

})

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

 

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

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

引用一位前輩的:event對(duì)象中的屬性:

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


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

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

<!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;//相對(duì)于頁(yè)面左上角X的坐標(biāo)
   var y=event.pageY;//相對(duì)于頁(yè)面左上角Y的坐標(biāo)
   var mouse="";//點(diǎn)擊類(lèi)型
   switch(code){
    case 1:mouse="左鍵";
    break;
    case 2:mouse="中鍵(滾輪)";
    break;
    case 3:mouse="右鍵";
    break;
    default:break;
   }
   $('#click-pos').html("點(diǎn)擊類(lèi)型:"+mouse+"--位置-X:"+x+'-Y:'+y);//顯示到頁(yè)面上
  })
  
 </script>
</body>

</html>

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

3.編寫(xiě)自定義菜單

達(dá)到的顯示效果:

廢話(huà)不多上代碼:

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

  /* 菜單的每個(gè)選項(xiàng) */
  #mouse-menu li {
   border-top: 1px solid #000;
  }

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

  /* 當(dāng)鼠標(biāo)移入時(shí) */
  #mouse-menu li:hover {
   background-color: deepskyblue;
  }
 </style>
</head>
<label id="click-pos">
 顯示內(nèi)容
</label>
<div id="demo1">
 <p>在此區(qū)域啟用自定義菜單,原菜單已禁用</p>
</div>
<!-- 最外層為遮罩層,用于綁定點(diǎn)擊任意位置關(guān)閉菜單事件 -->
<!-- 默認(rèn)隱藏 -->
<div id="layer" style="display:none">
 <ul id="mouse-menu">
  <li>選項(xiàng)卡1</li>
  <li>選項(xiàng)卡2</li>
  <li>選項(xiàng)卡3</li>
  <li>選項(xiàng)卡4</li>
  <li>選項(xiàng)卡5</li>
  <li>選項(xiàng)卡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;//相對(duì)于頁(yè)面左上角X的坐標(biāo)
   var y = event.pageY;//相對(duì)于頁(yè)面左上角Y的坐標(biāo)
   var mouse = "";//點(diǎn)擊類(lèi)型
   switch (code) {
    case 1: mouse = "左鍵";
     break;
    case 2: mouse = "中鍵(滾輪)";
     break;
    case 3: mouse = "右鍵";
     break;
    default: break;
   }
   $('#click-pos').html("點(diǎn)擊類(lèi)型:" + mouse + "--位置-X:" + x + '-Y:' + y);//坐標(biāo)顯示到頁(yè)面上

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

 </script>
</body>

</html>

總結(jié)

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

相關(guān)文章

最新評(píng)論