Question

单击div（#CanvasArea）时，我尝试显示文本框（#dimVal）。当它失去焦点时，我想让这个文本框消失。

    <head>
    <script src="jquery-1.5.1.js" type="text/javascript"></script>
    </head>

    <body>
    <div id = "CanvasArea", style = "width:50%; height:600px; border:2px; border-color:orange; border-style:solid; float:left">
    <h3>Click Me</h3>
    </div>

    <input type="text", id="dimVal", value="111", style="position:absolute; display:none; left:300px; top:300px" />

    <script type="text/javascript">
    onMouseDown = function(e){
        $("#dimVal").show();
        $("#dimVal").focus();
        $("#dimVal").focusout(onLostFocus);
    }

    onLostFocus = function(e){
        $("#dimVal").hide();
        $("#dimVal").unbind("focusout");
    }

    $("#CanvasArea").bind("mousedown", onMouseDown);
    </script>

    </body>

我想知道为什么“focusout”事件会在鼠标点击后立即触发？

Answer 1

那是因为当您将焦点放在CanvasArea时，鼠标位于dimVal之上，因此dimVal在获得焦点后立即失去焦点。

Answer 2

将mousedown更改为click事件，因为在click事件mousedown事件触发之前，然后执行代码，将焦点设置在文本框之后{{1}触发事件后焦点丢失，从而触发click事件。还可以使用匿名函数而不是具有全局函数。试试这个。

focusout

Answer 3

我无法让您的代码以当前形式工作，所以我使用jQuery mouseup函数和最新版本的jQuery重写了它：

$(document).ready(function() { 
$("#CanvasArea").mouseup(function() {
    $("#dimVal").show();
    $("#dimVal").focus();
    $("#dimVal").focusout(onLostFocus);
});

onLostFocus = function(e){
    $("#dimVal").hide();
    $("#dimVal").unbind("focusout");
}
});

按预期工作，单击画布区域时显示，并在用户单击表单时删除焦点。

意外的“焦点”事件触发

3 个答案: