Dialog的关闭事件触发焦点事件并导致死循环答案

【问题标题】：Dialog's close event triggers focus event and leads to endless loopDialog的关闭事件触发焦点事件并导致死循环
【发布时间】：2014-07-16 12:06:23
【问题描述】：

我将我的应用程序移动到最新的 jQueryUI 版本，现在行为发生了变化。也就是说，当打开对话框时，会在具有焦点的元素上调用 blur 事件。当对话框关闭时，再次调用该元素的焦点事件。以前的 jQuery 版本没有调用这些事件。

问题是我在焦点事件中打开对话框，关闭它因此再次调用焦点并发生无限循环。

如何防止这种无限循环？

编辑：

我无法在一个简单的 jsfiddle 中把它弄好最好的是这个

http://jsfiddle.net/8sfjV/11/

<div id="dialog" title="Select Value">
    <select id="select" name="select">
        <option value="1">Test</option>
    </select>
</div>
<input type="text" name="test" id="test" value="" />

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        height: 120,
        width: 185,
        position: [285, 200],
        modal: true,
        buttons: {
            "Ok": function () {
                $(this).dialog("close")
            }
        }
    });

    $("#test").focus(function (event) {
        $("#dialog").dialog("open");
    });
});

这里没有无限循环，但您可以在关闭对话框后看到页面（结果）被破坏，因为一切都“模糊”了。

旧的行为也更像这样：

http://jsfiddle.net/SrSXU/3/

这里的背景仍然“模糊”，但您可以专注于新版本无法实现的输入。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

尝试使用点击而不是焦点。这应该工作：

http://jsfiddle.net/bDnK9/

$("#test").click(function (event) {
    $("#dialog").dialog("open");
});

【讨论】：

这对键盘导航或屏幕阅读器用户没有帮助。

【解决方案2】：

我不能说这是否适用于早期的 jQueryUI 版本，但是...

关闭对话框后，焦点会自动返回到元素打开对话框时获得焦点。

http://api.jqueryui.com/dialog/

看来你应该使用另一个事件来打开你的对话框。

【讨论】：

【解决方案3】：

您是否考虑过从关闭设置状态然后检查它？

如果在关闭对话框时，您设置了$("#test").data('coming-from-dialog', true) 之类的内容，那么您的焦点处理程序可以是：

$("#test").focus(function (event) {
    var test = $(this);
    if(!!test.data('coming-from-dialog')) {
        // clear state for next focus
        $this.data('coming-from-dialog', false);
        return;
    }

    $("#dialog").dialog("open");
});

当然你也可以在对话框关闭焦点上关闭其他东西，或者点击文档正文左右来清除焦点。

【讨论】：

我想出了一个在模糊事件中设置的控制变量：jsfiddle.net/ZuZdV/4

【解决方案4】：

var idOfTheElementLastModalWasOpenedFor = null;
$(":focusable:not(#test)").focus(function() {
    idOfTheElementLastModalWasOpenedFor = null;
});

$("#test").focus(function (event) {
    thisID = $this.attr("id");
    if(idOfTheElementLastModalWasOpenedFor != thisID){        
        idOfTheElementLastModalWasOpenedFor = thisID;
        $("#dialog").dialog("open");
    }
});

为了改善用户体验，您可能需要执行以下操作：

var idOfTheElementLastModalWasOpenedFor = null;
$(":focusable:not(#test)").focus(function() {
    idOfTheElementLastModalWasOpenedFor = null;
});

function openMyModal(event) {
    $thisID = $this.attr("id");
    if(event.type == "click" || idOfTheElementLastModalWasOpenedFor != $thisID){        
        idOfTheElementLastModalWasOpenedFor = $thisID;
        $("#dialog").dialog("open");
    }
};    

$("#test").focus(openMyModal);
$("#test").click(openMyModal);

【讨论】：