jquery 输入字段焦点在除 div 之外答案

【问题标题】：jquery input field focus out except a divjquery 输入字段焦点在除 div 之外
【发布时间】：2014-09-04 09:03:24
【问题描述】：

我正在提出 ajax 搜索建议，其中，将显示一个建议框

<div id="searchbox">
    <input type="text" name="search" class="searchinput"/>
</div>

<div id="sugbox">
 ......
 <a href="product.php?id=2" >Item 1</a>
 .....
</div>

和 Javascript

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function () {
    $('#searchbox #sugbox').hide();
 });

如果搜索文本框#searchbox .searchinput 是focus，建议框将打开，如果focusout 则隐藏。问题：每当我单击建议框上的链接时，建议框都会隐藏（因为输入焦点事件）。

如何检查目标 div 是否是建议框，所以不要隐藏框前..

 $('#searchbox .searchinput').focusout(
 function () {
    if(target div is not sugbox)
        $('#searchbox #sugbox').hide();
 });

【问题讨论】：

您可以将#sugbox 作为子div 放入#searchbox 或者您可以在.searchinput 的focusout 中添加一个if 语句，因此只有当焦点不在搜索框内时才会隐藏或 sugbox
你想只在身份证上做还是在课堂上做？像
到
?
请检查更新的问题

【解决方案1】：

尝试在悬停类中为 sugbox 分配一个类

 $(".searchinput").focus(function(){
   $("#sugbox").show();
});
$(".searchinput").focusout(function(){
   if(!$("#sugbox").hasClass("hovered"))
   $("#sugbox").hide();
});
 $("#sugbox").hover(function(){
   $(this).addClass("hovered");
},function(){
   $(this).removeClass("hovered");
 });

这里是 jsfiddle 的示例：http://jsfiddle.net/kyawlay/9wg49L2b/5

【讨论】：

错误代码！！！一旦输入焦点，然后框悬停，单击框，然后将焦点移出输入框..它不会隐藏
这是因为输入框焦点输出事件已在建议框点击事件上触发。它不完整，只是针对您的目的的解决方案。实际上，您应该处理 body click 事件以隐藏建议框，您应该检查输入框焦点状态和建议框悬停状态。
我针对这个问题更新了 jsfiddle 示例。你可以试试jsfiddle.net/kyawlay/9wg49L2b/5

【解决方案2】：

在框上添加一个 mousedown 处理程序（我认为在聚焦/模糊之前触发），单击时将标志设置为 true，然后在隐藏之前检查此标志

var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
 function () {   boxClicked = true;});
$(document).mousedown(// reset boxclicked
 function () {   boxClicked = false;});

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#mainsearch .searchinput').focusout(
 function () {
    if(!boxClicked)   $('#mainsearch #sugbox').hide();// add condition
 });

【讨论】：

对不起..我写错了#mainsearch..它是#searchbox
随便设置你想要的选择器，这只是一种做法，你自己安排吧
这是一个正确的解决方案，您只需要尝试理解它并且只根据您的需要更改选择器，我的三明治也想要吗？

【解决方案3】：

您使用了错误的选择器。检查这个演示。 http://jsfiddle.net/m711LLwr/

$('#searchbox #sugbox').show();

应该是

$('#mainsearch #sugbox').show();

【讨论】：

对不起..我写错了#mainsearch..它是#searchbox

【解决方案4】：

试试这个，它的作用是当searchinput失去焦点然后如果sugbox没有类'NoHide'，然后隐藏它。在点击事件的主体上，如果点击目标不是 searchinput 也不是 sugbox 也不是 sugbox 锚点，则 NoHide 类被分配给 sugbox。

如果事件目标不在上述 3 个选择器中，则删除类 NoHide。我有一个小提琴，但我希望你在你的页面中尝试，因为小提琴会让你感到困惑（因为它有 iframe 并且小提琴的主体区域是有限的）。

$('#searchbox .searchinput').focus(
 function () {

    $('#sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function (event) {
        if(!$('#sugbox').hasClass('NoHide'))
        $('#sugbox').hide();
 });

$('body').on('click',
 function (event) {

    if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") &&  !$(event.target).is("#sugbox")){
        $("#sugbox").hide().removeClass('NoHide');
    }else
    {
      $("#sugbox").show().addClass('NoHide');
    }
 });

【讨论】：