1

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

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

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

$('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();
    }
});

但是，如果我能弄清楚如何正确处理 blur 事件（这也可能由元素外部的制表符触发），我就不需要了。

4

1 回答 1

1

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

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

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

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

于 2013-10-01T22:15:20.727 回答