我正在使用这段代码:

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

这个HTML:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

问题是,我有链接在div和当他们不再工作时,点击。


当前回答

这是我在另一个线程上找到的jsfiddle,也可以使用esc键:http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

其他回答

这段代码检测页面上的任何单击事件,然后当且仅当所单击的元素既不是#CONTAINER元素也不是它的后代元素时,隐藏#CONTAINER元素。

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

P是元素名。这里也可以传递id、类或元素名。

现场演示与ESC功能

适用于桌面和移动设备

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

如果在某些情况下,你需要确保你的元素在点击文档时是可见的:If ($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

甚至溶化:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

在弹出窗口中使用接受的答案时,可能会遇到一些问题。在某些情况下,点击一个随机位置可能会导致不必要的操作,即错误地单击一个按钮可能会将您带到一个新页面。

我不确定这是否是最有效的解决方案,但为了防止这种情况,我建议使用屏幕掩码。确保屏幕掩码位于<body>标签的正下方,这样它就可以覆盖所有的屏幕宽度:100%;高度:100%。还要注意,它的z-index: 99高于所有元素。如果你想让另一个项目或div在屏幕掩码激活时可点击,只需为该项目或div分配更高的z-index。

屏幕掩码最初是不显示的(display:none),当单击(onclick="hidemenu()")时,它调用一个hide函数。

<body>
<div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>

处理“同一页面上多个不同弹出菜单”的javascript函数可能如下所示:

<script>
// an element with onclick="showmenu('id_here')" pops a menu in the screen
function showmenu(id) {  
  var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu
  $('.cardmenu').hide();   // clear the screen from other popmenus first
  $(popmenu).show();          // pop the desired specific menu
  $('.screenmask').show(); // activate screenmask
}
    
function hidemenu() {      // called when clicked on the screenmask
  $('.cardmenu').hide();   // clear the screen from all the popmenus
  $('.screenmask').hide(); // deactivate screenmask
}
</script>