WEB前端 挨踢

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

#Blur, #JAVASCRIPT, #WEB前端, #事件

背景：
在项目中采用了验证框架，当用户触发了blur事件后,即会对此focusout的input进行校验。
但是当用户在blur时正发点击了某个button后，就悲剧了，系统只会执行blur方法，却不会执行button上的click方法。
可以看以下的例子

Javascript代码
  1. <script language=”JavaScript” src=”jquery.js” type=”text/javascript”></script>
  2.         <script>
  3.         $(‘input:visible’).live(‘blur’, function(e){
  4.             alert(‘blur’);
  5.         });
  6. </script>
  7. <body>
  8. <input type=”text” name=”text_test”/>
  9. <a id=”darcyYang” href=”javascript:void(0)” name=”darcyYang” onclick=”alert(‘click’)”>click</a>
  10. </body>

当用户从input失去焦点时后，会执行blur事件，同时单独点击herf 也会执行onclick事件.
但一旦两个重叠，JS却不能生成这两个方法的执行链，只会默认执行blur事件.

后面通过网上搜索和自已试验后，发现可以通过如下的方式来实现：

Javascript代码
  1. var browser = navigator.userAgent;
  2. if (browser.indexOf(‘MSIE’) != -1){
  3.     if(‘darcyYang’ == document.activeElement.id )
  4.           {
  5.         $(“#darcyYang”).click();
  6.         return false;
  7.     }
  8. }else if(browser.indexOf(‘Firefox’) != -1){
  9.     if(‘click’ == e.originalEvent.explicitOriginalTarget.wholeText){
  10.         $(“#darcyYang”).click();
  11.         return false;
  12.     }
  13.     }

在IE中，可以采用 activeElement来获取事件最终源， 同时在firefox下可以通过 originalEvent.explicitOriginalTarget 来获得事件最终源，本以为如此就可以解决，但是却没有这么简单。

在chrome和safari下，这个代码是执行不成功的，chrome中activeElement得出的是body,根本无法满足需求,更不用说safari了。
我几乎用google找遍了JQUERY社区和chrome社区的所有BUGLIST，发现这个是chrome存在了一年多的 BUG，chrome并不支持事件最终源。他默认只有currentTarget或者是srcTarget,这样是找不出来blur事件的下一事件链的。
我正准备放弃时，却突然发现，完全可以绕过这个浏览器缺陷来实现，通过jquery的mouse方法即可：

Javascript代码
  1. $(“#darcyYang”).mousedown(function(){
  2.                   $(“#darcyYang”).click();
  3.              return false;
  4.             });

通过mousedown可以判断当前鼠标点击的元素，即事件最终源。
在此，我总结出可以兼容主流浏览器的代码如下：

Javascript代码
  1. var browser = navigator.userAgent;
  2.     if (browser.indexOf(‘MSIE’) != -1){
  3.         if(‘darcyYang’ == document.activeElement.id )
  4.            {
  5.             $(“#darcyYang”).click();
  6.             return false;
  7.         }
  8.     }else if(browser.indexOf(‘Firefox’) != -1){
  9.         if(‘click’ == e.originalEvent.explicitOriginalTarget.wholeText){
  10.             $(“#darcyYang”).click();
  11.             return false;
  12.         }
  13.         }
  14.     else
  15.     {
  16.         $(“#darcyYang”).mousedown(function(){
  17.               $(“#darcyYang”).click();
  18.               return false;
  19.         });
  20.     }

 

Related Post

挨踢

与时间做朋友

挨踢

女神节快乐

挨踢

A Brief Talk about Endeca & ATG High Level Integration

One thought on “Blur事件源的捕捉以及各种主流浏览器的兼容”

  1. 这个我一直用的是mouseDown来处理的，我还不知道居然里面有这些深意。。。网上搜了很多都没有这个解决方案的。 学习了

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

You Missed

挨踢

与时间做朋友

Inspiration

TED – The Benefits of a Bilingual Brain

Inspiration

TED : 女孩要勇敢而不必完美

Inspiration

一周是一年的2%