JavaScript自定義右鍵選單詳解

antzone發表於2017-04-13
JavaScript

本章節分享一段程式碼例項，它實現了自定義右鍵選單的功能。

下面就給出程式碼例項，並且做一下詳細分析介紹，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#menu {
  width: 254px;
  font-size: 12px;
  position: fixed;
  top: 0px;
  left: 0px;
  padding-top: 2px;
  border: 1px solid #ccc;
  display: none;
}
#menu li {
  list-style: none;
  line-height: 25px;
  margin-left: -1px;
  padding-left: 26px;
}
#menu li:hover {
  background-color: #4281f4;
  color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var menu = document.getElementById("menu");
  document.oncontextmenu = function (e) {
    var e = e || window.event;
    menu.style.display = "block";
    var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ?
        (document.documentElement.clientWidth - menu.offsetWidth) : e.clientX;
    var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight) ?
        (document.documentElement.clientHeight - menu.offsetHeight) : e.clientY;
    menu.style.left = cakLeft + "px";
    menu.style.top = cakTop + "px";
    return false;
  }
  document.onclick = function () {
    menu.style.display = "none";
  }
}
</script>
</head>
<body>
  <ul id="menu">
    <li>返回(B)</li>
    <li>前進(F)</li>
    <li>從新載入(R)</li>
    <li>另存為(A)</li>
    <li>列印(P)</li>
    <li>檢視網頁原始碼(V)</li>
    <li>檢視網頁資訊(I)</li>
    <li>審查元素(N)</li>
  </ul>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var menu = document.getElementById("menu")，獲取id屬性值為menu的元素物件。

（3）.document.oncontextmenu = function (e) {}，為document註冊oncontextmenu事件，也就是右鍵會彈出選單。

（4）.var e = e || window.event，相容所有瀏覽器的事件物件。

（5）.menu.style.display = "block"，顯示右鍵選單。

（6）.var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ? 

(document.documentElement.clientWidth - menu.offsetWidth) : e.clientX，如果點選右鍵時，滑鼠指標在瀏覽器客戶區的座標距離客戶區右側的距離小於自定義選單的寬度，那麼設定此選單的left屬性值就是瀏覽器客戶區寬度減去選單寬度，否則就是滑鼠指標在客戶區的座標值。

（7）.menu.style.left = cakLeft + "px";

menu.style.top = cakTop + "px";

設定右鍵選單的left和top值。

（8）.return false，這個很重要，取消預設動作，否則系統自帶的右鍵選單也會出現。

（9）.document.onclick = function () {

  menu.style.display = "none";

}，點選document就會隱藏右鍵選單。

相關文章