javascript - 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>