Question

在jquery中执行clickout的最简单方法是什么？如果在其外部的任何位置单击div框，则隐藏div框。

Answer 1

我不喜欢使用stopPropagation的解决方案，因为我经常使用事件冒泡来管理各种链接。如果盒子存在，我不想担心他们可能会停止工作。我的选择看起来像这样：

var $box = $('#box');
$(document.body).click(function(){
    if (!$box.has(this).length) { // if the click was not within $box
        $box.hide();
    }
});

has函数过滤选择并仅在元素包含作为参数传递的元素时返回元素（您也可以使用选择器字符串，但这里不相关）。如果点击位于框外，length将为0，因此条件将会通过，并且该框将被隐藏。

这应该通过设置框当前是否可见的布尔值来优化，如果当前可见，则仅进行has调用。

Answer 2

喜欢这样：

$("#thediv").show(0, function() {
   var that = $(this);
   $(document).bind("click", function(e) {
       if($(e.target).attr("id") != that.attr("id")) {
          that.hide();
          $(this).unbind("click");
       }
    });
});

在这里摆弄：http://jsfiddle.net/XYbmE/3/

Answer 3

$('body').click(function() {
    $('#box').fadeOut();
});

$('#box').click(function(e) {
    e.stopPropagation();
});

这是有效的，因为如果你点击内部，#box将首先收到点击事件。由于传播停止，附加到主体的处理程序将不会接收它，因此除非您在框外单击，否则不会关闭框。

如果您希望立即隐藏，请使用.hide()

我从How do I detect a click outside an element?

获得了stopPropagation（）技巧

Answer 4

我知道jQuery对表单元素有"focusout"事件，不确定它是否可以用于

Answer 5

我建议使用此库https://github.com/gsantiago/jquery-clickout。真棒！

$('button').on('clickout', function (e) {
  console.log('click outside button')
})

Answer 6

将点击功能绑定到文档本身：

$(document).click(function(){
    alert('doc');
});

然后将一个函数绑定到div本身的同一个事件并返回false，这样事件就不会冒泡到文档中。

$('#mydiv').click(function(e){
    alert('mydiv click');
    return false;
}

Answer 7

继承我的解决方案

    var ClickOut = {};

    ClickOut.list = [];

    ClickOut.Add = function(jqel, callback) {
        var i = ClickOut.list.push({jqel:jqel, callback:callback});
        return (i-1);
    }

    ClickOut.Remove = function(i) {
        ClickOut.list.splice(i, 1);
    }

    ClickOut.Init = function() {
        $('body').click(function(e) {
            for(var x = 0; x < ClickOut.list.length; x++) {
                if (!ClickOut.list[x].jqel.has(e.target).length) {
                    ClickOut.list[x].callback();
                }
            }
        });
    }

在jquery中点击

7 个答案: