如何将模糊事件绑定到实时点击事件？

Question

我有这个功能：

$('input#auto_results').bind('blur', function(e) {
    $('.result').bind('click', function() {
        return;
    });
    $('#results_container').hide();                                       
}); 

基本上，我希望#results_container隐藏在模糊处，除非单击类.result的元素。

以上功能不起作用

Answer 1

您的代码出现问题：

您要做的是在click上的.result事件处理程序中附加另一个事件（blur）的事件处理程序。

除了附加基本上什么都不做的click处理程序之外，你的代码什么都不做。

---

简单选项：

blur事件将首先触发，click事件将在.results秒触发，因此这不是一个简单的情况。

最简单的方法是：

$('input#auto_results').blur(function () {
    $('#results_container').hide();
});

$('.result').click(function () {
    $('#results_container').show();
});

jsFiddle Demo

所以只需隐藏容器，点击即可再次显示。结果眨了眨眼。

---

超时选项：

我能想到的另一个选择是，在blur被触发时设置一个小超时，在点击事件.results上取消它。在此示例中，我使用body函数将超时存储在.data()上，您可以将其存储在更合理的元素上，这只是一个演示：

$('input#auto_results').blur(function () {
    var cucc=setTimeout(function () {
        $('#results_container').hide();
        $('body').removeData('blurTimeout');
    }, 100);
    $('body').data('blurTimeout', cucc);
});

$('.result').click(function () {
    var cucc=$('body').data('blurTimeout');
    if (typeof cucc != 'undefined') {
        clearTimeout(cucc);
    }
});

jsFiddle Demo