jquery的focus和blur事件的兼容性问题?

先把代码贴上来吧:            var IsVerifyCodeFocused;
            var IsTxtVerifyCodeFocused;
            $("#txtVerifyCode").focus(function () {
                IsTxtVerifyCodeFocused = true;
                if (document.getElementById("divVerifyCode")) {
                    $("#divVerifyCode").fadeIn();
                }
                else {
                    var imgVerifyCode = $("<div id='divVerifyCode' style='height:55px;background-color:#dff6c6;border:1px solid #bdde98;text-align:center;line-height:20px'><img alt='验证码' id='imgCode'  src='BLL/VerificationCode.ashx' title='看不清楚，换一张'  height='30px' width='70px' style='border:1px solid #aecaca;cursor:pointer;' /><br/><span id='spanChangeVerifyCode' class='ChangeVerifyCode'>点击更换验证码</span></div>");
                    $("body").append(imgVerifyCode);
                    var offset = $("#txtVerifyCode").offset();
                    var width = $("#txtVerifyCode").width();
                    var top = offset.top - $("#divVerifyCode").height() - 1;
                    var left = offset.left;
                    $("#divVerifyCode").css({ 'position': 'absolute', 'width': width + 'px', 'top': top + 'px', 'left': left + 'px' }).focus(function () {
                        IsVerifyCodeFocused = true;
                    }).blur(function () {
                        IsVerifyCodeFocused = false;
                        setTimeout("hideVerifyCode()", 0);
                    });
                    $("#imgCode").click(function () {
                        this.src = 'BLL/VerificationCode.ashx?tmp=' + new Date().getTime().toString(36);
                    });
                    $("#spanChangeVerifyCode").click(function () {
                        $("#imgCode").attr("src", "BLL/VerificationCode.ashx?tmp=" + new Date().getTime().toString(36));
                    }).mouseenter(function () {
                        this.className = 'ChangeVerifyCode ChangeVerifyCodeHover';
                    }).mouseout(function () {
                        this.className = 'ChangeVerifyCode';
                    });
                }            }).blur(function () {
                IsTxtVerifyCodeFocused = false;
                setTimeout("hideVerifyCode()", 0);
            });
        function hideVerifyCode() {
            if (document.getElementById("divVerifyCode")) {
                if (IsVerifyCodeFocused || IsTxtVerifyCodeFocused) {
                    return;
                }
                $("#divVerifyCode").fadeOut();
            }
        }
在IE里面的效果正常:当输入验证码input获得光标时显示验证码,当失去光标时并且接下来的光标不在验证码上时隐藏验证码,同理如果验证码失去光标的同时,接下来的光标不在输入验证码input上则隐藏验证码.
但在FF4中$("#divVerifyCode").focus(function () {IsVerifyCodeFocused = true;})似乎没有效果,也就是说只要输入验证码input失去光标就会把验证码隐藏了,根本无法把光标移动到验证码上

解决方案 »

  1.   

    FF4下可能是你的文本框和验证码图片之间有间隙了。这样试试：
    <style>
      *{margin:0px;padding:0px;}
    </style>
    </head>
      

  2.   

    我做了个测试，新建一个HTML静态页面：<head>
    <script type="text/javascript">
    $("ipt").focus(function(){
        alert("focus");
    }).blur(function(){
        alert("blur");
    });
    </script>
    </head>
    <body>
      <input type="text" id="ipt" />
    </body>在IE下将光标移到文本框先触发alert("focus")而在FF4下先触发alert("blur")并且无法将光标移到文本框
      

  3.   

    你用验证码图片的onmouseout()隐藏图片吧