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

Posted 2023-03-05

【中文标题】如何将模糊事件绑定到实时点击事件？

【英文标题】：How to bind a blur event to a live click event?

【发布时间】：2011-09-17 02:25:32

【问题描述】：

我有这个功能：

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

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

上述功能不起作用

【参考方案1】：

您的代码有问题：

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

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

---

简单选项：

blur 事件将首先被触发，click 上的.results 第二个事件，所以这不是一个容易的情况。

最简单的方法是：

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

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

jsFiddle Demo

所以只需隐藏容器，单击后再次显示它。结果只是眨了眨眼。

---

超时选项：

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

$('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