How to hide a custom right click Menu

Question

I found the source of the page (How to add a custom right-click menu to a webpage?) about "How to add a custom right-click menu to a webpage"

There is no functionality to hide the menu.

How do I hide the menu?

$(function() {
  
  var $contextMenu = $("#contextMenu");
  
  $("body").on("contextmenu", "table tr", function(e) {
    $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });
    return false;
  });
  
  $contextMenu.on("click", "a", function() {
     $contextMenu.hide();
  });
});

#contextMenu {
  position: absolute;
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>

  <table id="mt" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a>
      </li>
      <li><a tabindex="-1" href="#">Another action</a>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a>
      </li>
    </ul>
  </div>

</body>

</html>

Thanks!

Try placing this: e.preventDefault(); above the line $contextMenu.hide(); — Graham, May 06 '15 at 13:32

score 1 · Accepted Answer · answered May 06 '15 at 13:32

To hide the menu when you click outside you can attach a click event on body, html or something else when you click to hide it that hide it.

$('html').click(function() {
      $contextMenu.hide();
});

$(function() {

    var $contextMenu = $("#contextMenu");

    $("body").on("contextmenu", "table tr", function(e) {
         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY
         });
         return false;
    });

    $('html').click(function() {
         $contextMenu.hide();
    });

});

#contextMenu {
  position: absolute;
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>

  <table id="mt" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <div id="contextMenu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><a tabindex="-1" href="#">Action</a>
      </li>
      <li><a tabindex="-1" href="#">Another action</a>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a>
      </li>
    </ul>
  </div>

</body>

</html>

score -1 · Answer 2 · answered May 06 '15 at 13:37

-1

You can throw a custom alert on right-click like this.

$([element]).mousedown(function(e) {
    if (e.which === 3) {
        alert('right click is disabled');
    }
});

answered May 06 '15 at 13:37

Jayababu

1,641
1
14
30

Does not attempt to answer the question. – rdb Feb 18 '21 at 13:20

How to hide a custom right click Menu

2 Answers2