Javascript “意外”；“聚焦输出”；事件触发_Javascript_Jquery

Javascript “意外”；“聚焦输出”；事件触发

javascript jquery

Javascript “意外”；“聚焦输出”；事件触发,javascript,jquery,Javascript,Jquery,我尝试在单击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

我尝试在单击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>


点击我
onMouseDown=函数（e）{
$（“#dimVal”）.show（）；
$（“#dimVal”）.focus（）；
$（“#dimVal”）.focusout（onLostFocus）；
}
onLostFocus=函数（e）{
$（“#dimVal”）.hide（）；
$（“#dimVal”）.unbind（“focusout”）；
}
$（“#CanvasArea”）.bind（“mousedown”，onMouseDown）；

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

这是因为当您将焦点交给

dimVal

时，您的鼠标位于

CanvasArea

上方，因此

dimVal

在获得后立即失去焦点

将

mousedown

更改为

click

事件，因为在

click

事件触发之前

eventmousedown
事件触发，然后执行将焦点设置到文本框的代码，触发click
事件后焦点丢失，因此触发focusout
事件。也可以使用匿名函数，而不是全局函数。试试这个
$("#CanvasArea").bind("click", function(e){
    $("#dimVal").focusout(function(e){
        $(this).hide().unbind("focusout");
    }).show().focus();
});

我无法使您的代码以当前形式工作，因此我使用jQuery mouseup函数和最新版本的jQuery重写了代码：
$(document).ready(function() { 
$("#CanvasArea").mouseup(function() {
    $("#dimVal").show();
    $("#dimVal").focus();
    $("#dimVal").focusout(onLostFocus);
});

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

这可以按预期工作，在单击画布区域时显示，在用户单击表单时删除焦点。
看来，我找到了解决方案。只需替换$（“#CanvasArea”）.bind（“mousedown”，onMouseDown）；美元（“#CanvasArea”）.bind（“mouseup”，onMouseDown）；