jquery中的点击

Question

在 jquery 中进行点击的最简单方法是什么，如果单击 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/< /a>

Answer 3

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

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

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

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

我从 如何检测元素外部的点击？

Answer 4

我建议使用这个库 https://github.com/gsantiago/jquery-clickout。太棒了！

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

Answer 5

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

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();
                }
            }
        });
    }