jquery – Focusout被触发两次

$(document).ready(function () {
    var HelpDial = $('#HelpDialog');
    var input = $('#HelpSearch');

    HelpDial.dialog({
        width: 800,autoOpen: false,modal: true,title: "Templates",position: [165,158]
    });

    input.focusin(function () {
        HelpDial.dialog('close');
    }).focusout(function () {
        HelpDial.dialog('open');
    }).on('keypress',function (E) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            input.focusout();
            return false;
        }
    });
});

<input id="HelpSearch" />
<div id="HelpDialog"></div>

阻止事件触发的唯一方法是取消绑定事件处理程序.或者,根据具体情况,根据事件发生时可用的信息采取差异化行动.

只要元素失去焦点,就会触发focusout事件.在这种情况下,每次用户单击文本框时,都会触发focusin事件.一旦光标离开文本框(在打开对话框时发生),就会触发焦点输出事件.

代码的问题在于您强行调用focusout事件,然后在打开对话框时自然调用focusout事件.因此,请按以下方式更改代码：

$(document).ready(function () {
    var HelpDial = $('#HelpDialog');
    var input = $('#HelpSearch');

    HelpDial.dialog({
        width: 800,158]
    });

    input.on('focusin',function () {
        input.on("focusout",textBoxFocusOut);
    }).on('keypress',function (E) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            textBoxFocusOut();
        }
    });

    function textBoxFocusOut() {
        input.off("focusout",textBoxFocusOut);
        HelpDial.dialog('open');                
    }

});

http://jsfiddle.net/8L7EL/1/

这段代码正在做的是将一个函数绑定到focusin处理程序中的focusout.如果用户离开文本框,将调用focusout事件处理程序,该处理程序立即取消绑定焦点事件(以防止多次绑定该函数).如果用户按下回车键,则手动调用该函数,在打开对话框之前删除聚焦事件处理程序,以防止在对话框打开时触发聚焦事件自动触发.