意外"focusout“事件触发
意外"focusout“事件触发
提问于 2012-01-26 22:34:51
当单击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“事件会在鼠标点击之后立即触发？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-01-26 23:00:17
我不能让你的代码在当前的形式下工作，所以我使用jQuery mouseup函数和最新版本的jQuery重写了它：
$(document).ready(function() {
$("#CanvasArea").mouseup(function() {
$("#dimVal").show();
$("#dimVal").focus();
$("#dimVal").focusout(onLostFocus);
});
onLostFocus = function(e){
$("#dimVal").hide();
$("#dimVal").unbind("focusout");
}
});它按预期工作，在单击画布区域时显示，并在用户单击窗体时移除焦点。
Stack Overflow用户
发布于 2012-01-26 22:53:57
这是因为当您将焦点放在dimVal上时，鼠标正在CanvasArea上，因此dimVal在获得焦点后会立即失去焦点。
Stack Overflow用户
发布于 2012-01-26 22:54:28
将mousedown更改为click事件，因为在click事件之前，mousedown事件会触发，然后您的代码会被执行，从而将焦点设置到textbox上，在click事件被触发之后，焦点会丢失，因此会触发focusout事件。同时使用匿名函数，而不是全局函数。尝尝这个。
$("#CanvasArea").bind("click", function(e){
$("#dimVal").focusout(function(e){
$(this).hide().unbind("focusout");
}).show().focus();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9019692
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号