失去焦点时销毁对话框

Question

我有一个程序,我有jQuery UI对话框.我希望这些对话框在失去焦点时关闭,例如用户点击相关对话框之外的任何地方.

从表面上看,这似乎是一个简单的问题,但blur事件根本不起作用.从那以后,我转向了focusin和focusout,但偶然发现一个奇怪的问题:

当我有一个对话,并已附着focusin和focusout含有该对话框(I称为元素的父元素dialog上).对话框出现后的第一次单击始终会产生一个focusout事件,无论点击的位置如何.

因此,如果我想破坏对话框focusout,那么对话框就不会被破坏.这是证明我的问题的jsFiddle.

我知道我可以使用一些技巧来忽略第一个focusout,但是我想知道是否有任何方法可以让它以正确的方式工作,这是当用户点击第一个对话框之外时产生的唯一事件时间.

更新:

在以下帮助下,我找到了一个令人愉快的答案underscore.js:

我将问题分解为部分:

1. A focusout在第一次点击时发生
2. 如果单击是在对话框外部,则没有其他事件
3. 如果单击是在对话框中,则会focusin跟随一个事件

因此,当有一系列focusout- > 时发生了不希望的行为focusin.我使用下划线的defer函数和布尔修饰符来解决这个问题

onFocusout: function(event) {
  console.log('focus out');
  this.hasFocus = false;
  var self = this;
  _.defer(function() {
    if (!self.hasFocus) alert('DESTROY DIALOG');
  });
},

onFocusin: function() {
  console.log('focus in');
  this.hasFocus = true;
},

defer使函数等待,直到调用堆栈已清除(在错误的行为情况下,focusin堆栈中有一个事件等待),然后执行它.因此,如果在变量更改onFocusin后立即触发,则延迟函数不会破坏对话框!onFocusouthasFocustrue

谢谢您的回答!

Answer 1

可能更好的选项是在页面的任何位置监听单击,如果在对话框区域外发生对话,则关闭对话框.就像是:

$(document).on("click", function(e) {
    var clickedOnDialog = $(e.srcElement)
         .closest(".ui-widget.ui-dialog") // these classes are fixed
         .children(".ui-dialog-content") // this as well
         .is(".dialog"); // this is your own class

    if (!clickedOnDialog) {
        $('.dialog').dialog('destroy');
    }
});

演示.