操作上模糊除非特定的元素与jQuery

点击

$('#myInput') // an input field for search 
$('#myList') // a list to display search results

我想隐藏列表当输入不再具有焦点，就像这样：

$('#myInput').blur(function() { 
    $('#myList').hide(); 
});

这样做效果很好，除非单击列表项时，因为模糊事件在注册点击之前触发并隐藏列表。目标是让列表在单击列表的任何部分时保持可见，即使这会导致输入模糊。

我该怎么做？谢谢！

来源

2011-02-04 Justin Stayton

您可以通过保持一个全局变量做到这一点，并setTimouts，以等待200ms的延迟，然后检查2个元素中的哪一个具有焦点。

var keepFocus = false; 

function hideList(){ 
    if(!keepFocus){ 
     $('#myList').hide(); 
    } 
} 

$('#myInput').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 


$('#myList').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
});

来源

2011-02-04 19:10:24

模糊和焦点似乎不适用于#myList，因为它不是输入。 – 2011-02-04 21:58:12

@Justin，这是什么？尝试删除列表中的`focus`方法，并将`blur`代码放入您的列表中`click`事件 – 2011-02-04 22:08:10

这只是一个div。我已经调整了您的代码以使用我的设置，所以谢谢！ – 2011-02-07 21:37:44

你需要能够说“做这个模糊（）除非列出的收益集中在同一时间”。

这个问题说，如何检测一个元素是否具有焦点：Using jQuery to test if an input has focus

然后，所有你需要做的是：

$("#myInput").blur(function() { 
    if (!$("#myList").is(":focus")) { 
     $("#myList").hide(); 
    } 
});

来源

2011-02-04 19:09:47

似乎并没有工作。 document.activeElement将body标签显示为“focused”元素。我猜这是行不通的，因为“聚焦”的想法固有地与输入字段相关联。 – 2011-02-04 19:32:58

要做到这一点，最好的办法是将事件处理程序附加到body元素，然后另一个处理程序的列表停止事件传播：

$(body).click(function() { 
    $("#myList").hide(); 
}); 

$("#myList").click(function (e) { 
    e.stopImmediatePropagation(); 
});

这侦听click＃的外myInput并隐藏#myList。同时，第二个函数侦听对#myList的点击，如果它发生，它会阻止hide（）发射。

来源

2011-04-06 02:56:52 Adam

我面临着完全相同的问题，所以这是我如何解决它。

，我想出了一个事实，即比click()早期blur()火灾。

所以我试图将click()更改为mousedown()，发现mousedown()在blur()之前发生火灾。

而且模仿click()你不得不解雇mousedown()然后mouseup()

所以你的情况我会做这样的事情：

var click_in_process = false; // global 

$('#myList').mousedown(function() { 
    click_in_process = true; 
}); 

$('#myList').mouseup(function() { 
    click_in_process = false; 
    $('#myInput').focus(); 

    // a code of $('#myList') clicking event 

}); 

$('#myInput').blur(function() { 
    if(!click_in_process) { 
     $('#myList').hide(); 

     // a code of what you want to happen after you really left $('#myInput') 

    } 
});

演示/例子：http://jsfiddle.net/bbrh4/

希望它有助于！

来源

2013-09-18 13:34:09

操作上模糊除非特定的元素与jQuery

回答

相关问题