[jQuery] 마우스 우클릭 이벤트

특정 영역에서만 우클릭 이벤트를 발생시키고 싶어서 event 함수를 적용해서 처리했다.

 

또 사용할 것 같은 기능이라 정리!

 

CSS

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px; 
    margin:0;
    padding:0;
}

.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.custom-menu li:hover {
    background-color: #DEF;
}

 

HTML

<ul class='custom-menu'>
  <li data-action = "F">First</li>
  <li data-action = "S">Second</li>
  <li data-action = "T">Third</li>
</ul>

<div class="treeList">
  우클릭 이벤트 영역!
</div>

 

JS

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu",function (event){
     if(event.target.classList.contains('treeList')) {
            // Avoid the real one
            event.preventDefault();

            // Show contextmenu
            $(".custom-menu").finish().toggle(100).

            // In the right position (the mouse)
            css({top: event.pageY +"px",left: event.pageX +"px"});
       }
});

// If the document is clicked somewhere
$(document).bind("mousedown",function (e){
     // If the clicked element is not the menu
     if(!$(e.target).parents(".custom-menu").length >0) {
             // Hide it
             $(".custom-menu").hide(100);
      }
});

// If the menu element is clicked
$(".custom-menu li").click(function(){
      // This is the triggered action name
      switch($(this).attr("data-action")) {
              // A case for each action. Your actions here
              case "F": alert("first");
              break;
              case "S": alert("second");
              break;
              case "T": alert("third");
              break;
       }
   
        // Hide it AFTER the action was triggered
        $(".custom-menu").hide(100);
});

 

참고 사이트

jsfiddle.net/u2kJq/241/