Blur事件源的捕杀以及各种主流浏览器的兼容

2012-09-16

Blur事件源的捕捉以及各种主流浏览器的兼容背景：在项目中采用了验证框架，当用户触发了blur事件后,即会对此

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;        });}

热点排行

Web前端

Blur事件源的捕杀以及各种主流浏览器的兼容