意外的“聚焦”事件觸發
[英]unexpected “focusout” event trigering
問題描述
單擊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 個解決方案
解決方案1
0 2012-01-26 14:53:56
這是因為你的鼠標在CanvasArea你提供焦點時dimVal因此dimVal獲得后立即失去焦點。
解決方案2
0 2012-01-26 14:54:27
更改mousedown到click事件因為之前click事件mousedown事件觸發，然后執行你的代碼將焦點設置到文本框，后click觸發事件焦點失去了對focusout事件被觸發。 還應使用匿名函數而不是具有全局函數。 嘗試這個。
$("#CanvasArea").bind("click", function(e){
$("#dimVal").focusout(function(e){
$(this).hide().unbind("focusout");
}).show().focus();
});
解決方案3
0 已采納 2012-01-26 15: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");
}
});
這將按預期工作，在單擊畫布區域時顯示，並在用戶單擊表單時移除焦點。
如何觸發焦點事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.