jQuery：在模糊上隐藏上下文菜单

Question

我不使用任何上下文菜单库，因为我不想这样创建自己的上下文菜单。问题是，如果我点击其他地方，它将不会关闭或隐藏。每当我点击其他地方或在上下文菜单之外时，我希望它关闭或隐藏。

$('#tbl td').on('contextmenu mousedown', function(e) {
  var content = $(this).text();
  if (e.which === 3) {
    var x = e.pageX;
    var y = e.pageY;
    $('#test').show(10, function() {
      $('#menu').menu();
      $(this).css({
        'left': x,
        'top': y
      });
    });
  }
  $('#test').blur(function() {
    $(this).hide();
  });
  return false;
});

#test {
  position: absolute;
  background-color: #000;
  color: #fff;
  display: none;
  padding: 5px;
}
table td {
  padding: 10px;
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table id="tbl" border="1">
  <tr>
    <td>1</td>
    <td>sample1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>sample2</td>
  </tr>
</table>
<div id="test">
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Answer 1

您只需添加以下行：

$(document).click( function(){
        $('#test').hide();
});

以下是完整代码段

$('#tbl td').on('contextmenu mousedown', function(e) {
  var content = $(this).text();
  if (e.which === 3) {
    var x = e.pageX;
    var y = e.pageY;
    $('#test').show(10, function() {
      $('#menu').menu();
      $(this).css({
        'left': x,
        'top': y
      });
    });
  }
 
  return false;
});
$(document).click( function(){
        $('#test').hide();
});

#test {
  position: absolute;
  background-color: #000;
  color: #fff;
  display: none;
  padding: 5px;
}
table td {
  padding: 10px;
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table id="tbl" border="1">
  <tr>
    <td>1</td>
    <td>sample1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>sample2</td>
  </tr>
</table>
<div id="test">
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Answer 2

<强> JS

 $('#tbl td').on('contextmenu mousedown', function(e) {
      var content = $(this).text();
      if (e.which === 3) {
        var x = e.pageX;
        var y = e.pageY;
        $('#test').show(10, function() {
          $('#menu').menu();
          $(this).css({
            'left': x,
            'top': y
          });
        });
      }

      return false;
    });

    $(document).click(function() {
          console.log($("#menu").is(':visible'));
          if($("#menu").is(':visible')){
               $("#test").hide();
          }
      });

DEMO