Blur事件源的捕捉以及各种主流浏览器的兼容
背景:
在项目中采用了验证框架,当用户触发了blur事件后,即会对此focusout的input进行校验。
但是当用户在blur时正发点击了某个button后,就悲剧了,系统只会执行blur方法,却不会执行button上的click方法。
可以看以下的例子
<script language="JavaScript" src="jquery.js" type="text/javascript"></script><script> $('input:visible').live('blur', function(e){ alert('blur');});</script><body><input type="text" name="text_test"/><a id="darcyYang" href="javascript:void(0)" name="darcyYang" onclick="alert('click')">click</a></body>当用户从input失去焦点时后,会执行blur事件,同时单独点击herf 也会执行onclick事件.
但一旦两个重叠,JS却不能生成这两个方法的执行链,只会默认执行blur事件.
后面通过网上搜索和自已试验后,发现可以通过如下的方式来实现:
var browser = navigator.userAgent;if (browser.indexOf('MSIE') != -1){if('darcyYang' == document.activeElement.id ) {$("#darcyYang").click();return false;}}else if(browser.indexOf('Firefox') != -1){ if('click' == e.originalEvent.explicitOriginalTarget.wholeText){$("#darcyYang").click();return false;}}在IE中,可以采用 activeElement来获取事件最终源, 同时在firefox下可以通过 originalEvent.explicitOriginalTarget 来获得事件最终源,本以为如此就可以解决,但是却没有这么简单。
在chrome和safari下,这个代码是执行不成功的,chrome中activeElement得出的是body,根本无法满足需求,更不用说safari了。
我几乎用google找遍了JQUERY社区和chrome社区的所有BUGLIST,发现这个是chrome存在了一年多的BUG,chrome并不支持事件最终源。他默认只有currentTarget或者是srcTarget,这样是找不出来blur事件的下一事件链的。
我正准备放弃时,却突然发现,完全可以绕过这个浏览器缺陷来实现,通过jquery的mouse方法即可:
$("#darcyYang").mousedown(function(){ $("#darcyYang").click(); return false; });通过mousedown可以判断当前鼠标点击的元素,即事件最终源。
在此,我总结出可以兼容主流浏览器的代码如下:
var browser = navigator.userAgent;if (browser.indexOf('MSIE') != -1){if('darcyYang' == document.activeElement.id ) {$("#darcyYang").click();return false;}}else if(browser.indexOf('Firefox') != -1){ if('click' == e.originalEvent.explicitOriginalTarget.wholeText){$("#darcyYang").click();return false;}}else{$("#darcyYang").mousedown(function(){ $("#darcyYang").click(); return false; });}