在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') 
})