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

Question

有两个元素在起作用:

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

我想在输入不再具有焦点时隐藏列表,如下所示:

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

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

我怎样才能做到这一点？谢谢!

Answer 1

您可以通过保持全局变量和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;
});

Answer 2

你需要能够说"做这个模糊(),除非列表同时获得焦点".

这个问题说明如何检测元素是否具有焦点:使用jQuery测试输入是否具有焦点

那么你需要做的就是:

$("#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 之外，然后释放鼠标，它也不会触发“模糊”事件。但就我而言，我也不太担心，因为点击是在目标 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>