onblur后下一个获取焦点的控件判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval...

[b]需求:[/b]
input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误。但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显示验证通不过的错误)。

[b]方法1: [/b]通过下述代码在input的onblur事件中取得当前正在活跃(被点击)的控件,然后根据业务来排除特殊控件()。[color=red]经测试,本方法适用IE8,在Firefox13、Chrome20测试通不过(target取得的一直是body)。[/color]

参考:[url=https://bugzilla.mozilla.org/show_bug.cgi?id=452307]document.activeElement returns [body] from blur event when focus is changing.[/url]
在Firefox下,onfocus事件触发时,document.activeElement取得的是预期的控件,但是在[color=red]onblur事件触发时,document.activeElement取得的是body,而不是下个获得焦点的控件[/color][color=blue],官网的解释是,在onblur事件触发时,下个被点击的控件还没有获得焦点,只有在onblur事件触发后,下个控件才得到焦点,因此onblur触发时,document.activeElement返回body[/color]。

// 只适用IE
var target = event.explicitOriginalTarget || document.activeElement;
alert(target.outerHTML);


[b]方法2:[/b]延迟验证(纯Javascript,适用所有浏览器)
由于onblur后特殊控件的点击事件 一定 发生在input控件的onblur事件[color=red]以后[/color],因此,在onblur事件中是无法直接得到[color=red]将来的状态:特殊控件是否被点击了[/color]
可以通过把onblur要做的验证操作[color=red]做一小段时间的后移[/color],然后在做真正验证操作之前,检查特殊控件时候被点击,如果没有,继续验证,否则不做验证操作。

specialClicked = false,
specialClickEvent: function(){
specialClicked = true;
// 特殊事件的操作
},

onblurEvent: function(event){
// 适用所有浏览器,延迟100ms
setTimeout(function(){onblurEventDelay();}, 100);
},
onblurEventDelay: function(event){
if (!specialClicked) {
// 这里做真正的验证操作
}
},


[b]方法3:[/b]jquery 1.6后增加了:focus选择器 [color=red]Firefox浏览器下,onfocus事件取到的是自己,onblur取到的是空[/color]
参考:[url=http://api.jquery.com/focus-selector/]:focus selector[/url]

查看当前使用的是哪个版本的jQuery

// Returns string Ex: "1.3.1"
$().jquery;

// Also returns string Ex: "1.3.1"
jQuery.fn.jquery;

查看各种浏览器以及版本信息

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
if($.browser.msie&&($.browser.version == "6.0")){
alert("<img src='browser/IE.png'>This is MS IE "+$.browser.version);
}
else if($.browser.msie&&($.browser.version == "7.0")){
alert("<img src='browser/IE.png'>This is MS IE "+$.browser.version);
}
else if($.browser.msie&&($.browser.version == "8.0")){
alert("This is MS IE "+$.browser.version);
}
else if($.browser.msie&&($.browser.version == "9.0")){
$("#browser").html("This is MS IE "+$.browser.version);
}
else if($.browser.safari){
$("#browser").html("<This is safari!");
}
else if($.browser.webkit){
$("#browser").html("This is chrome!");
}
else if($.browser.mozilla){
$("#browser").html("This is firefox!");
}
else if($.browser.opera){
$("#browser").html("This is opera");
}
else{$("#browser").html("i don't konw!");}

})
</script>

[b]setInterval:[/b]按照指定的周期(毫秒单位)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval("action()", 5000);

[b]setTimeout:[/b]指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
setTimeout(action, 5000)
setTimeout("action()", 5000)
function action () {
// do something
setTimeout(action, 5000);
}

带参数方法使用setTimeout要注意,setTimeout("函数名("+参数+")",毫秒数),这里的参数只能是字符串形式的,而不能传递一个对象。如果要传递对象,可以参考如下代码:

<script language="javascript">   
var __sto = setTimeout;   
window.setTimeout = function(callback, timeout, param) {   
var args = Array.prototype.slice.call(arguments, 2);   
var _cb = function() {   
callback.apply(null, args);   
}    __sto(_cb, timeout);   }   
//测试代码   
function shihuan(a) {   
alert(a);   
}   
function yushibo(a, b, c) {   
alert(a + b + c);   
}   
var a = new Object();   
window.setTimeout(shihuan, 1000, a);   
window.setTimeout(yushibo, 2000, a, 6, 7);

// 此例中,setTimeout用法,setTimeout(回调函数, 时间, 参数1, ..., 参数n)。
</script>

用setTimeout实现的每隔固定时间循环执行回调函数,和setInterval的区别:setInterval简单地按照设定的时间间隔回调函数,而[color=red]setTimeout的时间间隔是设定的时间 + 函数执行消耗的时间[/color]。如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值