jquery - jQuery focusOut 除非

Question

我只是想隐藏一个 div，如果一个文本框失去焦点，除非用户点击另一个特定的 div。如果用户单击该特定 div，则 focusout 不会触发 div.box 被隐藏。

下面是带有我的伪代码注释的代码。有任何想法吗？

textInput.focusout(function() {
    // So long you didn't click div.stop, then
        $('div.box').hide();
});

Answer 1

$(document).bind('click',function(e) {
  if ($(e.target).closest('div.box').length) return;
  $('div.box').hide();
});

试试这个！

Answer 2

var flag = false;

$('div.stop').click(function() {flag = true;});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    if(!flag)
        $('div.box').hide();
});

如果你想避免添加标志变量，你可以使用 jQuery 的.data来存储标志值，例如div.stop元素，例如：

$('div.stop').click(function() {$(this).data('clicked', true);});

// ...

    if(!$('div.stop').data('clicked'))
// ...

编辑

如果您想允许文本框具有焦点的情况，然后单击div.stop，并且您不希望它隐藏，那么您可以尝试以下操作：

$('div.stop').click(function() {$('div.box').stop();});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    $('div.box').delay(200).hide();
});

Answer 3

var flag = false;
$('#inputID').blur(function(){
   $('div.box').toggle(flag);       
});

$('#someDIVid').click(function(){
    flag = true;
});

简单的演示

补充说明：

.toggle（显示或隐藏）

showOrHide一个布尔值，指示是显示还是隐藏元素。如果此参数为true，则显示匹配的元素；如果false，则元素被隐藏。