onclick事件和onblur事件冲突

<input id="element1" type="text" onblur="function1" />

<div id="div2"><a id="element2" href="javascript:void(0)" onclick="function2">text</a></div>

...

var function1 = function(){

  $('#div2').html('text2');

}

如上,如果当前焦点在input中,点击a元素,会先执行element1的onblur事件,将div中的内容替换掉,无法完成function2方法。

解决方法:在onblur事件中添加如下代码,判断当前元素:

IE:

if  (document.activeElement && document.activeElement.id == 'element2'){
  return false;
}

FireFox:

if (e.explicitOriginalTarget && e.explicitOriginalTarget.parentElement.id == 'element2'){
  return false;
}

但是在chrome中找不到对应的参数。。。

所以最终:

if ($('#div2').html().indexOf('element2') != -1) {
  return false;
}

这是修改了业务逻辑之后的折中办法

posted @ 2012-02-10 13:06  野豌豆花  阅读(702)  评论(0编辑  收藏  举报