意外“聚焦”事件触发

当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”事件在鼠标点击后立即触发？

来源

2012-01-26 Alex

看来，我找到解决办法。只需替换 $（“＃CanvasArea”）。bind（“mousedown”，onMouseDown）; 与 $（“＃CanvasArea”）。bind（“mouseup”，onMouseDown）; – Alex

我是不是能够让你的代码在其目前的形式工作，所以我把它稍微使用jQuery的mouseup功能和jQuery的最新版本改写：

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

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

这个工程按预期，当单击画布区域时出现，并在用户单击表单时移除焦点。

来源

2012-01-26 15:00:17 Gordnfreeman

这是因为当您将注意力集中在dimVal时，您的鼠标已经过了CanvasArea，因此dimVal在获得后立即失去焦点。

来源

2012-01-26 14:53:56

变化mousedown到click事件，因为之前click事件mousedown事件触发，然后执行你的代码将焦点设置到文本框，将触发click事件后焦点将丢失，因此focusout事件被触发。也可以使用匿名函数而不是全局函数。尝试这个。

$("#CanvasArea").bind("click", function(e){ 
    $("#dimVal").focusout(function(e){ 
     $(this).hide().unbind("focusout"); 
    }).show().focus(); 
});

来源

2012-01-26 14:54:27 ShankarSangoli

意外“聚焦”事件触发

回答

相关问题