js 사용자 정의 메뉴를 오른쪽 단추로 팝업합니다

최근에 프로젝트에서 오른쪽 단추 메뉴의 수요가 있는데 많은 실현이 비교적 복잡하다는 것을 발견하여 자신이 약간의 시간을 들여 연구를 했고 다음은 간결한 실현 방법을 제공한다.
js 설명 섹션:

// 
var epMenu={
  create:function(point,option){
    var menuNode=document.getElementById('epMenu');
    if(!menuNode){
      // 
      menuNode=document.createElement("div");
      menuNode.setAttribute('class','epMenu');
      menuNode.setAttribute('id','epMenu');
    }else $(menuNode).html('');// 

    $(menuNode).css({left:point.left+'px',top:point.top+'px'});
    for(var x in option){
      var tempNode=document.createElement("a");
      $(tempNode).text(option[x]['name']).on('click',option[x].action);
      menuNode.appendChild(tempNode);
    }

    $("body").append(menuNode);
  },
  destory:function(){
    $(".epMenu").remove();
  }  
};

function sayhello(){
  alert("hellokity");
  epMenu.destory();
}

function hideSysMenu() {
  return false;
}

css 스타일 정의 섹션:

.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family: ; font-size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

다음은 메뉴의 사용자 정의 호출 부분입니다.

document.onmousedown = function(e){
    var menuNode=document.getElementById('epMenu');
    if(e.button===2){
      document.oncontextmenu = hideSysMenu;// 
      var evt = window.event || arguments[0];
      var rightedge = evt.clientX;
      var bottomedge = evt.clientY;
      epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);  
    }
//   epMenu.destory();
  }

간단히 설명:
1、epMenu.create 방법의 첫 번째 매개 변수는 메뉴가 튀어나온 위치 좌표(화면 왼쪽 상단에서 떨어짐)입니다. 여기는 마우스로 클릭하는 좌표를 사용하고 메뉴는 마우스를 따라 튀어나옵니다.두 번째 파라미터는 json 형식의 데이터로 사용자 정의 메뉴 항목에 사용되며,name는 메뉴 항목의 이름이고,action은 메뉴 항목을 클릭한 후의 동작(함수,ajax 요청 등)입니다.
2. e.button의 값: 2는 오른쪽 단추를 누르고, 0은 왼쪽 단추를 누르고, 4는 중간 단추(ie)를 누르는 것을 표시하며, 브라우저마다 button의 값이 다르기 때문에 여기는 ie11만 참고로 합니다.
3. 사용자 정의 메뉴를 만들기 전에 시스템의 기본 우클릭 메뉴를 반드시 차단하는 것이 중요합니다!!!
마지막으로 이 간단한 우클릭 메뉴 기능은 약간의 결함이 있습니다. 우클릭 메뉴가 튀어나온 후에 메뉴 항목의 클릭 조작을 하지 않으면 메뉴가 자동으로 닫히지 않습니다. 나중에 시간이 있으면 다시 보완하십시오.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.