javascript - 隐藏日历模糊或单击的最简单解决方案

http://jsfiddle.net/SXrAb/

在jsfiddle链接之后，有一个我需要的简化示例。当前，它在单击按钮时显示日历，并在输入模糊时将其隐藏。

我无法额外实现的是在单击按钮时隐藏日历。

因此-日历应：


打开按钮单击（如果隐藏）（完成）
隐藏模糊（完成）
如果打开则隐藏按钮单击（这是我所坚持的，因为模糊是在按钮单击事件之前触发的，所以我没有机会正确处理它）


UPD：

该解决方案有望在所有情况下均正常工作，例如“按钮上的鼠标下移，下方拖动，鼠标上移”（否则，我不会要求它;-)

最佳答案

尝试这个：

var $calendar = $('#calendar');
var mousedown = false;

$('#calendar-input').blur(function() {
    if (!mousedown)
        $calendar.hide();
});

$('#calendar-button').mousedown(function() {
    mousedown = true;
});

$('#calendar-button').mouseup(function() {
    mousedown = false;
});

$('#calendar-button').click(function() {
    if ($calendar.is(':visible')) {
         $calendar.hide();
    }
    else {
        $calendar.show();
        $('#calendar-input').focus();
    }
});

此处演示：http://jsfiddle.net/Tz73k/

更新：好的，我将mouseup事件移到了文档级别。我不认为现在可以通过在释放鼠标之前拖动鼠标来欺骗鼠​​标状态：

var $calendar = $('#calendar');
var mousedown = false;

$('#calendar-input').blur(function() {
    if (!mousedown)
        $calendar.hide();
});

$('#calendar-button').mousedown(function() {
    mousedown = true;
});

$(document).mouseup(function() {
    mousedown = false;
});

$('#calendar-button').click(function() {
    if ($calendar.is(':visible')) {
         $calendar.hide();
    }
    else {
        $calendar.show();
        $('#calendar-input').focus();
    }
});

更新的小提琴：http://jsfiddle.net/yQ5CT/

关于javascript - 隐藏日历模糊或单击的最简单解决方案，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9936600/