Question

我正在构建一个类似于datepicker的小部件，但是当（a）用户从输入框中选中标签或（b）点击时，我无法弄清楚如何使其消失在小部件和输入之外。

将模糊事件绑定到输入框很容易，但问题是当您单击窗口小部件时会触发它，并且似乎没有reliable方法来确定哪个元素焦点从模糊事件内部改变。

当用户点击输入外部时关闭窗口小部件也有点粗略，但它是可行的：

$('body').on('click', function(e) {
    if(e.target != self.element[0] && e.target != self.clock[0] && !$.contains(self.clock[0], e.target)) {
        self.clock.hide();
    }
});

但如果我能弄清楚如何正确处理模糊事件（也可能是通过元素外部的标签触发），我就不需要了。

Answer 1

事实证明解决方案实际上非常简单。感谢rojoca的建议，我想出了这个：

this.timepicker.on('mousedown', function(e) {
    return false;
});
this.element.on('blur', function(e) {
    self._parseInput();
    self._refreshInput();
    self._close();
});

首先触发mousedown事件，并返回false，以防止在单击窗口小部件时触发模糊事件。其他所有内容（在窗口小部件和输入框外部单击，或者标记离开）会导致模糊，从而根据需要关闭窗口小部件。

此外，在与窗口小部件交互时，将光标保持在文本框内是令人愉快的副作用。

除非单击小部件，如何在模糊上隐藏小部件？

1 个答案: