我正在使用这段代码:

$('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和当他们不再工作时,点击。


当前回答

如果你点击.form_wrapper返回false:

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

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

其他回答

你能做的就是将一个点击事件绑定到文档中,如果下拉菜单外的东西被点击,它就会隐藏下拉菜单,但是如果下拉菜单内的东西被点击,它就不会隐藏,所以你的“show”事件(或slidedown或任何显示下拉菜单的东西)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

然后在隐藏它时,取消绑定单击事件

$(document).unbind('click');

var exclude_div = $("#ExcludedDiv");; 美元(文档).click(函数(e) { 如果(! exclude_div。Is (e.target)) //如果目标div不是一个你想排除然后添加类隐藏 $ (" .myDiv1 ") .addClass(“隐藏”); });

小提琴

这么多答案我都用不上。相反,我采取了公认的答案(工作得很好),并缩短为以下(使用后代选择器):

$(document).mouseup(function(e) 
{
    if (!$(e.target).is("#targetSelector,#targetSelector *")) {
        $('#targetSelector').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>

摘自https://sdtuts.com/click-on-not-specified-element/

现场演示http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})