自定義右鍵選單實現過程詳解

螞蟻小編發表於2017-03-27

關於右鍵選單大家一定不會陌生，比如我們可以再桌面或者網頁點選右鍵，會彈出響應的右鍵選單，選擇不同的選單項可以執行不同的操作，但是有時候這樣的選單並不能夠滿足需要，可能需要根據不同的操作場景來彈出不同的選單，下面就介紹一下如何利用js實現自定義右鍵選單的功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-size:12px;
  line-height:24px;
  font-family:Arial, Helvetica, sans-serif;
}
#activeArea{
  width:300px;
  height:200px;
  background:#06C;
  color:#fff;
}
#cstCM{
  width:120px;
  background:#eee;
  border:1px solid #ccc;
  position:absolute;
}
#cstCM ul{
  margin:0;
  padding:0;
}
#cstCM ul li{
  list-style:none;
  padding:0 10px;
  cursor:default;
}
#cstCM ul li:hover{
  background:#009;
  color:#fff;
}
.splitTop{border-bottom:1px solid #ccc;}
.splitBottom{border-top:1px solid #fff;}
</style>
<script type="text/javascript">
function customContextMenu(ev){
  var cstCM=document.getElementById('cstCM');
  cstCM.style.left=ev.clientX + 'px';
  cstCM.style.top=ev.clientY + 'px';
  cstCM.style.display='block';
  document.onmousedown=clearCustomCM;
  return false;
}
function clearCustomCM(){
  document.getElementById('cstCM').style.display = 'none';
  document.onmousedown=null;
}
window.onload=function(){
  var activeArea=document.getElementById("activeArea");
  activeArea.oncontextmenu=function(ev){
    var ev=window.event||ev;
    customContextMenu(ev);
    return false;
  }
}
</script>
</head>
<body>
<div id="cstCM" style="display:none;">
  <ul>
    <li>div css教程</li>
    <li>jquery教程</li>
    <li>javascript教程</li>
    <li>正規表示式</li>
    <li>特效程式碼</li>
    <li>螞蟻部落</li>
  </ul>
</div>
<div id="activeArea">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了自定義右鍵選單效果，下面介紹一下它的實現過程。

一.實現原理:在預設狀態下，當我們點選右鍵的時候，彈出來的是系統給予的預設選單，但是這不是我們所需要的，所以在oncontextmenu事件處理函式中使用return false來取消自帶的預設選單。然後將預設狀態下隱藏的自定義右鍵選單顯示出來，並且根據滑鼠的點選座標進行定位，這樣就實現了右鍵選單效果。

二.相關閱讀:

1.clientX屬性可以參閱javascript clientX一章節。

2.var ev=window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

3.return false可以參閱javascript return false的作用是什麼一章節。

相關文章