div失去焦点事件实现思路

  看本文得先了解以下几个事件(摘自w3c)。

  blur事件: 当元素失去焦点时发生 blur 事件。

  focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。

  tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。

  我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。

  真实项目代码:

  

复制代码 代码如下:

  Esc.PopupMenu.prototype._createPopup=function(){

  var popupDiv = $('<div tabindex=1></div>'); //创建div

  popupDiv.appendTo(this._owner.element); //将div加span

  var _popup=popupDiv[0];

  _popup.hide=function(){

  popupDiv.hide();

  },

  _popup.show=function(){

  popupDiv.show();

  popupDiv.focus();<span style="white-space:pre"> </span>//让div得到焦点

  };

  popupDiv.blur(function(){

  popupDiv.hide();

  });

  return _popup;

  }

  这段代码的意思是我用div模拟一个createPopup(IE可以直接生成),生成的时候给它一个tabindex属性,然后加入span,然后让它支持显示隐藏。特别值得注意的是popupDiv,focus(),必须要给div一个焦点,否则它没有焦点如何失去焦点。