jquery - 在 jquery 中点击

Question

在 jquery 中单击的最简单方法是什么，如果单击它之外的任何地方，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 将首先接收单击事件。由于传播已停止，附加到 body 的处理程序将不会接收它，因此除非您在框外单击，否则框不会关闭。

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

我从如何检测元素外的点击中获得了 stopPropagation() 技巧？

Answer 4

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

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

Answer 5

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

Answer 6

将 click 函数绑定到文档本身：

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