在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

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

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

这是可行的，因为如果您单击里面，#box将首先收到点击事件。由于传播已停止，附着在身体上的处理程序将不会收到它，因此除非您在盒子外面单击，否则该盒子将不会关闭。

如果你要立即隐藏，使用.hide()

我已经得到了stopPropagation（）从How do I detect a click outside an element?

Answer 3

招我知道，jQuery的有"focusout"事件表单元素，不知道这是否可能也许可以用于

Answer 4

像这样：

$("#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 5

绑定点击函数文档本身：

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

那么功能结合于DIV本身相同的事件，并返回false，这样的事件不会冒泡到文档。

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

Answer 6

继承人我的解决方案

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

Answer 7

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

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