如何点击外部关闭这个菜单？

我有这个菜单：

CSS

#message { 
 display: none; 
 position: absolute; 
 width: 120px; 
 background: #fff; 
 color: #000; 
 font-weight: bold; 
}

当我点击它时，它会打开#message。 我的问题是关闭这个东西。

JS:

$(function() {

  $("#subm").click(function(evt) {
    $("#message").css({
      top: 55,
      left: evt.pageX - 55
    }).show();
  });

});

我尝试将此代码放入上面的函数中：

  $('html').click(function(evt) {
    if($('#message').is(":visible")) {
        $('#message').hide();
    }
  });

但什么也没发生，显然菜单是同时打开和关闭的。 怎么了？如何单击消息框外部甚至跨度类中的按钮来关闭此菜单？

JSFiddle https://jsfiddle.net/jmpf1usu/3/

您可以将点击处理程序绑定到document关闭它：

例子：https://jsfiddle.net/jmpf1usu/4/ https://jsfiddle.net/jmpf1usu/4/

  $("#subm").click(function(evt) {
    $("#message").css({
      top: 55,
      left: evt.pageX + 55
    }).show();

      evt.stopPropagation();
  });

  $(document).click(function(){
      $("#message").hide();
  });

evt.stopPropagation()是必需的，以便点击永远不会到达document，从而立即触发它再次关闭。