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 는 가운데 단 추 를 누 르 는 것 을 나타 내 며 각 브 라 우 저의 button 값 이 다 릅 니 다. 여 기 는 ie11 만 참고 합 니 다.3. 사용자 정의 메뉴 를 만 들 기 전에 시스템 의 기본 오른쪽 키 메뉴 를 차단 하 는 것 이 중요 합 니 다!!마지막 으로 이 간단 한 오른쪽 버튼 메뉴 기능 은 약간의 흠 이 있 습 니 다. 오른쪽 버튼 메뉴 가 팝 업 된 후에 메뉴 항목 의 클릭 조작 을 하지 않 으 면 메뉴 가 자동 으로 닫 히 지 않 고 나중에 시간 이 있 으 면 다시 보완 하 겠 습 니 다.IT 물이 깊 으 니 천천히 헤엄쳐 라 하하 하!!!