마우스 오른쪽 버튼 클릭 메뉴 사용자 정의

오른쪽 클릭 메뉴 사용자 정의

오른쪽 클릭 메뉴를 사용자 정의합니다. 일부 ERP 시스템의 경우 기능적 작업이 많기 때문에 일반적으로 사용자 정의된 오른쪽 클릭 메뉴에 일반적으로 사용되는 여러 기능을 넣습니다. 사용자의 편의.

사용자 정의 메뉴를 구현하는 방법은 매우 간단합니다. 먼저 원래의 마우스 오른쪽 버튼 클릭 메뉴를 차단해야 합니다. 클릭하면 사용자 정의 메뉴가 숨겨집니다.

*{margin:0;padding:0}
a{text-decoration:none}
ul li{list-style:none}
.menu{border:1px solid black;border-radius:5px;display:inline-block;position:fixed;top:100px;left:550px;
overflow:hidden;padding-bottom:10px;box-shadow:0 0 10px 0;z-index:999;display:none;background:white}
.menu ul li{height:30px;width:100%}
.menu ul li a{height:30px;display:inline-block;width:100%;text-align:left;line-height:30px;padding:5px 10px}
.menu li a:hover{background-color:#EEF5E2}

<div class="menu" id="demo">
    <ul>
        <li><a href="#">向录入员发送消息</a></li>
        <li><a href="#">发送选中作业</a></li>
        <li><a href="#">设置作业状态</a></li>
        <li><a href="#">哈哈哈哈哈</a></li>
        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
        <li><a href="#">呵呵呵呵呵呵</a></li>
    </ul>
  </div>

1. 원래 오른쪽 클릭 메뉴를 보호합니다.

이를 수행하기 위해 JS에서 제공하는 이벤트가 바로 oncontextmenu입니다. 원래의 오른쪽 클릭 메뉴는 더 이상 나타나지 않습니다:

document.oncontextmenu = function(){  return false;
}

2. 사용자 정의 메뉴의 크기 가져오기

사용자 정의 메뉴는 처음에는 숨겨져 있으므로 방법이 없습니다. 숨겨진 요소를 숨기려면 너비와 높이를 가져옵니다. 먼저 메뉴 요소를 숨김으로 설정하고 요소의 너비와 높이를 가져온 다음 이 속성을 제거할 수 있습니다.

function getHideDOMWH(obj){
      //obj为菜单元素的DOM对象
      var wh = {};
      obj.style.visibility = "hidden";
      wh.w = obj.scrollWidth;
      wh.h = obj.scrollHeight;
      obj.style.visibility = null;
      return wh;
  }

3. 사용자 정의 메뉴가 현재 마우스 위치에 나타납니다

먼저 현재 마우스 위치를 가져와야 합니다. 현재 마우스 위치는 사용자 정의 메뉴가 나타나는 위치입니다. 동시에, 오른쪽으로부터의 거리나 아래로부터의 거리가 메뉴를 표시하기에 충분하지 않은 상황에 주의하십시오.

document.onmousedown = function(e){
    //obj为菜单元素DOM对象
    var e = e || window.event;
    if(e.button==2){
        var left = e.clientX;
        var top = e.clientY;
        var windowHeight = document.body.scrollHeight;
        var windowWidth = document.body.scrollWidth;
        var wh = getHideDOMWH(obj);
        var contentHeight = wh.h;
        var contentWidth = wh.w;
        obj.style.left = windowWidth-left>contentWidth?left+"px":windowWidth-contentWidth+"px";
        obj.style.top = windowHeight-top>contentHeight?top+"px":top-contentHeight+"px";
        obj.style.display = "inline-block";
    }
}

브라우저 창의 너비에서 오른쪽으로부터의 거리를 뺀 너비 커서를 클릭했을 때 왼쪽이 메뉴의 너비보다 작다면, 이는 더 이상 메뉴를 표시할 만큼 커서와 오른쪽 사이의 거리가 충분하지 않음을 의미합니다. 이때 메뉴는 오른쪽에 가깝게 만듭니다. 메뉴의 왼쪽 값은 브라우저 창 너비에서 메뉴 너비를 뺀 값입니다. 브라우저 창의 높이에서 커서부터 위쪽까지의 거리를 뺀 값이 메뉴의 높이보다 작다면, 이때 커서에서 아래쪽까지의 거리가 메뉴를 표시하기에 충분하지 않다는 의미입니다. 메뉴의 상단 값은 커서에서 상단까지의 거리에서 메뉴 높이의 거리를 뺀 값입니다.

4. 메뉴 요소나 다른 요소를 클릭하면 메뉴를 숨깁니다.

document.onclick = function(){    //obj为菜单元素DOM对象
    obj.style.display = "none";
}

사용 편의성을 위해 위 프로세스를 메서드나 기본 JS에 캡슐화할 수 있습니다. Element Extend 프로토타입(IE7 이하에서는 오류를 보고함)에서 메소드를 확장하거나 JQ 프로토타입에서 메소드를 캡슐화합니다.

function contextMenu(obj){
      //obj为DOM对象
      document.oncontextmenu = function(){
          return false;
      }
      document.onmousedown = function(e){
          var e = e||window.event;
          if(e.button==2){
              var mouseX = e.clientX;
              var mouseY = e.clientY;
              var wh = getObjWH(obj);
              var contentW = wh.w;
              var contentH = wh.h;
              var documentW = document.body.scrollWidth;
              var documentH = document.body.scrollHeight;
              obj.style.left = documentW-mouseX<contentW?documentW-contentW+"px":mouseX+"px";
              obj.style.top = documentH-mouseY<contentH?mouseY-contentH+"px":mouseY+"px";
              obj.style.display = "inline-block";
          }
          
      }
      document.onclick = function(){
          obj.style.display = "none";
      }
      function getObjWH(obj){
          var wh = {};
          obj.style.visibility = "hidden";
          wh.w = obj.scrollWidth;
          wh.h = obj.scrollHeight;
          obj.style.visibility = null;
          return wh;
      }
  }

모든 이벤트는 문서에 바인딩되며 일반적으로 이벤트에 버블링 메커니즘을 사용합니다. 요소에 취소 버블링을 설정하면 몇 가지 문제가 발생합니다.