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

How to hide widget on blur except when widget is clicked?

本文关键字：小部 单击 隐藏 模糊      更新时间：2023-09-26

我正在构建一个类似于日期选择器的小部件，但是当（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();
    }
});

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

事实证明，解决方案实际上非常简单。多亏了罗霍卡的建议，我想出了这个：

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

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

此外，它有一个意想不到的令人愉快的副作用，即在与小部件交互时将光标保持在文本框内。

相关文章：