Question

我有一个div，当您在文本框中输入时会弹出一个项目列表。

在模糊文本框时，我隐藏了项目列表。

但是，我点击了不再触发的项目上的事件，因为focusout事件首先触发。

我想要的是隐藏模糊列表，除非点击了列表中的项目。

有人知道某种方式吗？

在提问时，它应该与本网站的标签部分相同。

Answer 1

使用jQuery 1.6或更高版本，您可以使用：焦点选择器在隐藏div之前查看您的div是否有任何具有焦点的子节点。

$("#textboxID").blur(function () {
    if ($("#divID").has(":focus").length == 0) {  //if you click on anything other than the results
        $("#divID").hide();  //hide the results
    }
});

更新：原来只在IE中有效。这是一个更好的解决方案，虽然这个任务有点复杂。 http://jsfiddle.net/cB2CN/

var resultsSelected = false;
$("#ResultsDIV").hover(
    function () { resultsSelected = true; },
    function () { resultsSelected = false; }
);

$("#TextBox").blur(function () {
    if (!resultsSelected) {  //if you click on anything other than the results
        $("#ResultsDIV").hide();  //hide the results
    }
});

Answer 2

我正在为我正在构建的网络应用程序开发自定义搜索引擎。这是我提出的类似问题的解决方案。据我所知，它适用于所有浏览器。

$( document ).ready(function() {
    $( '#inputBox' ).focusout( function() {
        $( '#resultsDiv' ).hover(
            function() {         
                return;
            },
            function() {
                $( '#resultsDiv' ).fadeOut( 'slow' );
                $( '#resultsDiv' ).html( '' );
            });
    });
});

我将模糊方法更改为focusout（顺便说一下，必须全部小写... focusOut将不起作用）。 .hover事件有两个条件;对或错。第一个函数如果是真的则触发（如果用户将鼠标悬停在结果上），如果用户没有将鼠标悬停在结果上，则触发第二个函数。

我遇到的唯一“问题”是当用户走出#resultsDiv时它会消失。我会在它周围添加一些清晰的填充物，以确保用户不会在事故发生时离开它。

除非单击某个div，否则jQuery会将焦点隐藏在焦点上

2 个答案: