Question

我将我的应用程序移动到最新的jQueryUI版本，现在行为已经改变。即，在打开对话框时，在具有焦点的元素上调用blur事件。关闭对话框后，将再次调用该元素的焦点事件。以前的jQuery版本没有调用这些事件。

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

如何防止这种无限循环？

编辑：

我无法在一个简单的jsfiddle中做到最好这个是

<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/

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

Answer 1

我不能说早期的jQueryUI版本是否也是如此，但是......

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

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

似乎您应该使用其他事件打开对话框。

Answer 2

尝试使用click而不是focus。这应该有效：

http://jsfiddle.net/bDnK9/

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

Answer 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");
});

当然，您也可以在对话框上关闭其他内容，或者单击文档正文以清除焦点。

Answer 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);

Dialog的关闭事件触发焦点事件并导致无限循环

4 个答案: