Tạo menu ngữ cảnh nhấp chuột phải tùy chỉnh cho ứng dụng web của tôi

127

Tôi có một vài trang web như google-docs và map-Quest có menu thả xuống tùy chỉnh khi bạn nhấp chuột phải. Bằng cách nào đó, họ ghi đè lên hành vi của trình đơn thả xuống của trình duyệt và bây giờ tôi chắc chắn chính xác cách họ thực hiện. Tôi đã tìm thấy một plugin jQuery thực hiện điều này, nhưng tôi vẫn tò mò về một số điều:

Cái này hoạt động ra sao? Là menu thả xuống của trình duyệt thực sự bị ghi đè, hoặc hiệu ứng chỉ là mô phỏng? Nếu vậy thì thế nào?
Các plugin trừu tượng đi những gì? Điều gì đang xảy ra đằng sau hậu trường?
Đây có phải là cách duy nhất để đạt được hiệu ứng này?

tùy chỉnh hình ảnh menu ngữ cảnh

Xem một số menu ngữ cảnh tùy chỉnh trong hành động

— Gordon Gustafson
nguồn

219

Tôi biết câu hỏi này rất cũ, nhưng chỉ cần đưa ra cùng một vấn đề và tự mình giải quyết nó, vì vậy tôi sẽ trả lời trong trường hợp có ai tìm thấy câu hỏi này thông qua google như tôi đã làm. Tôi dựa trên giải pháp của mình dựa trên @ Andrew, nhưng về cơ bản đã sửa đổi mọi thứ sau đó.

BIÊN TẬP : thấy mức độ phổ biến của nó gần đây, tôi đã quyết định cập nhật các kiểu để làm cho nó trông giống 2014 hơn và giống như windows 95. Tôi đã sửa các lỗi @Quantico và @Trengot để bây giờ nó là một câu trả lời chắc chắn hơn.

EDIT 2 : Tôi thiết lập nó với StackSnippets vì chúng là một tính năng mới thực sự thú vị. Tôi rời khỏi jsfiddle tốt ở đây để suy nghĩ tham khảo (nhấp vào bảng thứ 4 để xem chúng hoạt động).

Đoạn mã mới:

// JAVASCRIPT (jQuery)

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // 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 "first": alert("first"); break;
        case "second": alert("second"); break;
        case "third": alert("third"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });

/* CSS3 */

/* The whole thing */
.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;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}

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

<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me

Mở rộng đoạn trích

Lưu ý: bạn có thể thấy một số lỗi nhỏ (thả xuống xa con trỏ, v.v.), vui lòng đảm bảo rằng nó hoạt động trong jsfiddle , vì nó giống với trang web của bạn hơn so với StackSnippets.

— Francisco Presencia
nguồn

1

Tôi nghĩ rằng bạn có thể có một vấn đề với mousedown. Nó có thể gây ra tình trạng cuộc đua, vì việc nhấp vào một mục trình đơn sẽ kích hoạt một nhấp chuột là mousedown và chuột lên.

— Quantico

2

Cảm ơn @Quantico, đó là sự thật và bây giờ nó đã được sửa, cả trong mã và trong jsfiddle. Còn vấn đề nào khác không? Sidenote: wow, 170 lần chỉnh sửa trước đây cho jsfiddle, nó chắc chắn đã trở nên phổ biến.

— Francisco Presencia

1

Khi sử dụng fiddle mới, nếu cửa sổ bật lên của bạn xuất hiện trong suốt nếu bạn sử dụng bất kỳ thành phần html nào khác trên trang. EDIT: Thêm màu nền cho css giải quyết nó.

— Holloway

1

Một vấn đề nhỏ khác: nếu bạn nhấp chuột phải vào một nơi nào đó trong khi menu hiển thị, nó nhấp nháy trước khi hiển thị. Tôi cảm thấy nó nên ẩn (như mặc định) hoặc ẩn và sau đó xuất hiện ở vị trí mới.

— Holloway

@ChetanJoshi có vẻ như nó nên hoạt động trên IE11 theo MDN: developer.mozilla.org/en-US/docs/Web/Events/ trộm Bạn có thấy lỗi gì không?

— Francisco Presencia

63

Như Adrian đã nói, các plugin sẽ hoạt động theo cùng một cách. Có ba phần cơ bản bạn sẽ cần:

1: Xử lý 'contextmenu'sự kiện cho sự kiện:

$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("<div class='custom-menu'>Custom menu</div>")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});

Tại đây, bạn có thể liên kết trình xử lý sự kiện với bất kỳ bộ chọn nào mà bạn muốn hiển thị menu. Tôi đã chọn toàn bộ tài liệu.

2: Trình xử lý 'click'sự kiện cho sự kiện (để đóng menu tùy chỉnh):

$(document).bind("click", function(event) {
    $("div.custom-menu").hide();
});

3: CSS để điều khiển vị trí của menu:

.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
}

Điều quan trọng với CSS là bao gồm z-indexvàposition: absolute

Sẽ không quá khó khăn để gói tất cả những thứ này vào một plugin jQuery bóng bẩy.

Bạn có thể xem một bản demo đơn giản tại đây: http://jsfiddle.net/andrewwhitaker/fELma/

— Andrew Whitaker
nguồn

Tôi nghĩ menu ngữ cảnh này sẽ hữu ích hơn nếu nó vẫn mở khi người dùng nhấp vào bên trong nó (nhưng đóng khi người dùng nhấp vào bên ngoài nó). Nó có thể được sửa đổi để làm việc theo cách này?

— Anderson Green

2

Bạn sẽ nhìn vào event.targetbên trong các ràng buộc nhấp chuột vào document. Nếu nó không nằm trong menu ngữ cảnh, hãy ẩn menu: jsfiddle.net/fELma/286

— Andrew Whitaker

2

Tôi đã sửa đổi nó một chút (để nó ngăn nhiều menu hiển thị cùng một lúc): jsfiddle.net/fELma/287

— Anderson Green

Tôi đang cố gắng tạo một menu ngữ cảnh nhấp chuột phải xuyên tâm (giống như các menu ở đây: push-pixels.org/wp-content/uploads/2012/07/ trên ). Đây là một khởi đầu tuyệt vời để hiểu làm thế nào để đi về nó, cảm ơn!

— Boris

@AndrewWhitaker câu trả lời của bạn nói rằng nó sẽ được áp dụng trên toàn bộ tài liệu. Điều gì sẽ xảy ra nếu tôi muốn nó được áp dụng cho một điều khiển cụ thể, ví dụ: một nút (giả sử id của nó là nút1) ..?

— Tk1993

8

<!DOCTYPE html>
<html>
<head>
    <title>Right Click</title>

    <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>

</head>
<body>
    <span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span>
    <script type="text/javascript">
        
        $(function() {
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m); 
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })    
    });
    </script>
</body>
</html>

Mở rộng đoạn trích

— Isa vô hạn
nguồn

4

đây là một ví dụ cho menu ngữ cảnh nhấp chuột phải trong javascript: Menu nhấp chuột phải

Mã javasScript thô được sử dụng cho chức năng menu ngữ cảnh. Bạn có thể vui lòng kiểm tra điều này, hy vọng điều này sẽ giúp bạn.

Mã sống:

(function() {
  
  "use strict";


  /*********************************************** Context Menu Function Only ********************************/
  function clickInsideElement( e, className ) {
    var el = e.srcElement || e.target;
    if ( el.classList.contains(className) ) {
      return el;
    } else {
      while ( el = el.parentNode ) {
        if ( el.classList && el.classList.contains(className) ) {
          return el;
        }
      }
    }
    return false;
  }

  function getPosition(e) {
    var posx = 0, posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    } else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return {
      x: posx,
      y: posy
    }
  }

  // Your Menu Class Name
  var taskItemClassName = "thumb";
  var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active";
  var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item");
  var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight;

  function initMenuFunction() {
    contextListener();
    clickListener();
    keyupListener();
    resizeListener();
  }

  /**
   * Listens for contextmenu events.
   */
  function contextListener() {
    document.addEventListener( "contextmenu", function(e) {
      taskItemInContext = clickInsideElement( e, taskItemClassName );

      if ( taskItemInContext ) {
        e.preventDefault();
        toggleMenuOn();
        positionMenu(e);
      } else {
        taskItemInContext = null;
        toggleMenuOff();
      }
    });
  }

  /**
   * Listens for click events.
   */
  function clickListener() {
    document.addEventListener( "click", function(e) {
      var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );

      if ( clickeElIsLink ) {
        e.preventDefault();
        menuItemListener( clickeElIsLink );
      } else {
        var button = e.which || e.button;
        if ( button === 1 ) {
          toggleMenuOff();
        }
      }
    });
  }

  /**
   * Listens for keyup events.
   */
  function keyupListener() {
    window.onkeyup = function(e) {
      if ( e.keyCode === 27 ) {
        toggleMenuOff();
      }
    }
  }

  /**
   * Window resize event listener
   */
  function resizeListener() {
    window.onresize = function(e) {
      toggleMenuOff();
    };
  }

  /**
   * Turns the custom context menu on.
   */
  function toggleMenuOn() {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }
  }

  /**
   * Turns the custom context menu off.
   */
  function toggleMenuOff() {
    if ( menuState !== 0 ) {
      menuState = 0;
      menu.classList.remove( contextMenuActive );
    }
  }

  function positionMenu(e) {
    clickCoords = getPosition(e);
    clickCoordsX = clickCoords.x;
    clickCoordsY = clickCoords.y;
    menuWidth = menu.offsetWidth + 4;
    menuHeight = menu.offsetHeight + 4;

    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;

    if ( (windowWidth - clickCoordsX) < menuWidth ) {
      menu.style.left = (windowWidth - menuWidth)-0 + "px";
    } else {
      menu.style.left = clickCoordsX-0 + "px";
    }

    // menu.style.top = clickCoordsY + "px";

    if ( Math.abs(windowHeight - clickCoordsY) < menuHeight ) {
      menu.style.top = (windowHeight - menuHeight)-0 + "px";
    } else {
      menu.style.top = clickCoordsY-0 + "px";
    }
  }


  function menuItemListener( link ) {
    var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id");
    console.log('Your Selected Photo: '+menuSelectedPhotoId)
    var moveToAlbumSelectedId = link.getAttribute("data-action");
    if(moveToAlbumSelectedId == 'remove'){
      console.log('You Clicked the remove button')
    }else if(moveToAlbumSelectedId && moveToAlbumSelectedId.length > 7){
      console.log('Clicked Album Name: '+moveToAlbumSelectedId);
    }
    toggleMenuOff();
  }
  initMenuFunction();

})();

/* For Body Padding and content */
body { padding-top: 70px; }
li a { text-decoration: none !important; }

/* Thumbnail only */
.thumb {
  margin-bottom: 30px;
}
.thumb:hover a, .thumb:active a, .thumb:focus a {
  border: 1px solid purple;
}

/************** For Context menu ***********/
/* context menu */
.context-menu {  display: none;  position: absolute;  z-index: 9999;  padding: 12px 0;  width: 200px;  background-color: #fff;  border: solid 1px #dfdfdf;  box-shadow: 1px 1px 2px #cfcfcf;  }
.context-menu--active {  display: block;  }

.context-menu__items { list-style: none;  margin: 0;  padding: 0;  }
.context-menu__item { display: block;  margin-bottom: 4px;  }
.context-menu__item:last-child {  margin-bottom: 0;  }
.context-menu__link {  display: block;  padding: 4px 12px;  color: #0066aa;  text-decoration: none;  }
.context-menu__link:hover {  color: #fff;  background-color: #0066aa;  }
.context-menu__items ul {  position: absolute;  white-space: nowrap;  z-index: 1;  left: -99999em;}
.context-menu__items > li:hover > ul {  left: auto;  padding-top: 5px  ;  min-width: 100%;  }
.context-menu__items > li li ul {  border-left:1px solid #fff;}
.context-menu__items > li li:hover > ul {  left: 100%;  top: -1px;  }
.context-menu__item ul { background-color: #ffffff; padding: 7px 11px;  list-style-type: none;  text-decoration: none; margin-left: 40px; }
.page-media .context-menu__items ul li { display: block; }
/************** For Context menu ***********/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>



    <!-- Page Content -->
    <div class="container">

        <div class="row">

            <div class="col-lg-12">
                <h1 class="page-header">Thumbnail Gallery <small>(Right click to see the context menu)</small></h1>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>

        </div>

        <hr>


    </div>
    <!-- /.container -->


    <!-- / The Context Menu -->
    <nav id="context-menu" class="context-menu">
        <ul class="context-menu__items">
            <li class="context-menu__item">
                <a href="#" class="context-menu__link" data-action="Delete This Photo"><i class="fa fa-empire"></i> Delete This Photo</a>
            </li>
            <li class="context-menu__item">
                <a href="#" class="context-menu__link" data-action="Photo Option 2"><i class="fa fa-envira"></i> Photo Option 2</a>
            </li>
            <li class="context-menu__item">
                <a href="#" class="context-menu__link" data-action="Photo Option 3"><i class="fa fa-first-order"></i> Photo Option 3</a>
            </li>
            <li class="context-menu__item">
                <a href="#" class="context-menu__link" data-action="Photo Option 4"><i class="fa fa-gitlab"></i> Photo Option 4</a>
            </li>
            <li class="context-menu__item">
                <a href="#" class="context-menu__link" data-action="Photo Option 5"><i class="fa fa-ioxhost"></i> Photo Option 5</a>
            </li>
            <li class="context-menu__item">
                <a href="#" class="context-menu__link"><i class="fa fa-arrow-right"></i> Add Photo to</a>
                <ul>
                    <li><a href="#!" class="context-menu__link" data-action="album-one"><i class="fa fa-camera-retro"></i> Album One</a></li>
                    <li><a href="#!" class="context-menu__link" data-action="album-two"><i class="fa fa-camera-retro"></i> Album Two</a></li>
                    <li><a href="#!" class="context-menu__link" data-action="album-three"><i class="fa fa-camera-retro"></i> Album Three</a></li>
                    <li><a href="#!" class="context-menu__link" data-action="album-four"><i class="fa fa-camera-retro"></i> Album Four</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <!-- End # Context Menu -->


</body>

Mở rộng đoạn trích

— Robin Hossain
nguồn

Công việc tuyệt vời khi sử dụng vanilla JS và một bố cục sạch sẽ!

— kurt

3

Menu ngữ cảnh của trình duyệt đang bị ghi đè. Không có cách nào để tăng menu ngữ cảnh gốc trong bất kỳ trình duyệt chính nào.

Vì plugin đang tạo menu riêng, nên phần duy nhất thực sự được trừu tượng hóa là sự kiện menu ngữ cảnh của trình duyệt. Plugin tạo một menu html dựa trên cấu hình của bạn, sau đó đặt nội dung đó vào vị trí nhấp chuột của bạn.

Vâng, đây là cách duy nhất để tạo một menu ngữ cảnh tùy chỉnh. Rõ ràng, các plugin khác nhau làm mọi thứ hơi khác nhau, nhưng tất cả chúng sẽ ghi đè lên sự kiện của trình duyệt và đặt menu dựa trên html của chúng vào đúng vị trí.

— Adrian Gonzales
nguồn

2

Chỉ cần đề cập rằng Firefox hiện đang thêm hỗ trợ cho 'menu ngữ cảnh' gốc HTML5 (được khai báo thông qua đánh dấu). Nó hiện đã có trong Firefox 8 beta. ( developer.mozilla.org/en/Firefox_8_for_developers ).

— poshaughnessy

2

Bạn có thể xem hướng dẫn này: http://www.youtube.com/watch?v=iDyEfKWCzhg Đảm bảo rằng menu ngữ cảnh được ẩn lúc đầu và có vị trí tuyệt đối. Điều này sẽ đảm bảo rằng sẽ không có nhiều menu ngữ cảnh và việc tạo menu ngữ cảnh vô dụng. Liên kết đến trang được đặt trong phần mô tả của video YouTube.

$(document).bind("contextmenu", function(event){
$("#contextmenu").css({"top": event.pageY +  "px", "left": event.pageX +  "px"}).show();
});
$(document).bind("click", function(){
$("#contextmenu").hide();
});

— Asif Mallik
nguồn

1

Tôi biết rằng điều này cũng khá cũ. Gần đây tôi có nhu cầu tạo một menu ngữ cảnh mà tôi đưa vào các trang web khác có các thuộc tính khác nhau dựa trên yếu tố được nhấp.

Nó khá thô và có nhiều cách tốt hơn để đạt được điều này. Nó sử dụng menu jQuery Bối cảnh Thư viện nằm ở đây

Tôi rất thích tạo ra nó và mặc dù các bạn có thể sử dụng nó.

Đây là câu đố . Tôi hy vọng rằng nó có thể hy vọng giúp được ai đó ngoài kia.

$(function() {
  function createSomeMenu() {
    var all_array = '{';
    var x = event.clientX,
      y = event.clientY,
      elementMouseIsOver = document.elementFromPoint(x, y);
    if (elementMouseIsOver.closest('a')) {
      all_array += '"Link-Fold": {"name": "Link", "icon": "fa-external-link", "items": {"fold2-key1": {"name": "Open Site in New Tab"}, "fold2-key2": {"name": "Open Site in Split Tab"}, "fold2-key3": {"name": "Copy URL"}}},';
    }
    if (elementMouseIsOver.closest('img')) {
      all_array += '"Image-Fold": {"name": "Image","icon": "fa-picture-o","items": {"fold1-key1": {"name":"Download Image"},"fold1-key2": {"name": "Copy Image Location"},"fold1-key3": {"name": "Go To Image"}}},';
    }
    all_array += '"copy": {"name": "Copy","icon": "copy"},"paste": {"name": "Paste","icon": "paste"},"edit": {"name": "Edit HTML","icon": "fa-code"}}';
    return JSON.parse(all_array);
  }

  // setup context menu
  $.contextMenu({
    selector: 'body',
    build: function($trigger, e) {
      return {
        callback: function(key, options) {
          var m = "clicked: " + key;
          console.log(m);
        },
        items: createSomeMenu()
      };
    }
  });
});

— Cody Fidler
nguồn

0

Tôi có một triển khai tốt đẹp và dễ dàng bằng cách sử dụng bootstrap như sau.

<select class="custom-select" id="list" multiple></select>

<div class="dropdown-menu" id="menu-right-click" style=>
    <h6 class="dropdown-header">Actions</h6>
    <a class="dropdown-item" href="" onclick="option1();">Option 1</a>
    <a class="dropdown-item" href="" onclick="option2();">Option 2</a>
</div>

<script>
    $("#menu-right-click").hide();

    $(document).on("contextmenu", "#list", function (e) {
        $("#menu-right-click")
            .css({
                position: 'absolute',
                left: e.pageX,
                top: e.pageY,
                display: 'block'
            })
        return false;
    });

    function option1() {
        // something you want...
        $("#menu-right-click").hide();
    }

    function option2() {
        // something else 
        $("#menu-right-click").hide();
    }
</script>

— Alexandre Crivellaro
nguồn