Question

有两个元素在起作用：

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

我希望在输入不再具有焦点时隐藏列表，如下所示：

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

这很有用，除非单击列表项，因为blur事件会在注册单击之前触发并隐藏列表。目标是当列表的任何部分被单击时列表保持可见，即使这会导致输入模糊。

我该怎么做？谢谢！

Answer 1

您可以通过保持全局变量和setTimouts等待延迟200毫秒，然后检查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;
});

Answer 2

你需要能够说“做这个模糊（），除非列表同时获得焦点”。

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

然后您需要做的就是：

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

Answer 3

我遇到了完全相同的问题，所以这就是我解决它的方法。

我想到blur()比click()早发射的事实。

所以我尝试将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/

希望它有所帮助！

Answer 4

Pigalev Pavel的上述回答非常有效。

但是，如果您想要更简单的解决方案，则可以仅在元素的“鼠标悬停”中“防止默认值”，以防止发生模糊事件。（因为阻止默认设置实际上意味着最后输入永远不会失去焦点！）

当然，只有在可以防止div出现默认设置的情况下，这才可以。它确实有一些副作用，例如文本不再可选。只要这不是问题，就可以。

我想如果您将鼠标保持在div上方，将鼠标移到div之外，然后释放鼠标，那么它也不会触发“ blur”事件。但就我而言，我也不是很担心，因为点击是从目标div开始的。

$("input").focus(function(){
	$(this).val("");
});

$("input").blur(function(){
	$(this).val("blur event fired!");
});

$("div").mousedown(function(e){
	e.preventDefault();
})

div{
  height: 200px;
  width: 200px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>

Answer 5

执行此操作的最佳方法是将事件处理程序附加到body元素，然后将另一个处理程序附加到列表以停止事件传播：

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

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

这会侦听#myInput之外的点击并隐藏#myList。同时，第二个函数侦听#myList上的单击，如果它发生，它会阻止hide（）被触发。

除非使用jQuery单击特定元素，否则对模糊执行操作

5 个答案: