div失去焦點事件實現思路_javascript技巧

看本文得先了解以下幾個事件（摘自w3c）。

blur事件: 當元素失去焦點時發生 blur 事件。

focus事件:focus() 方法用來賦予文字域焦點(也值讓某些元素得到焦點事件)。

tabIndex屬性:tabIndex 屬性可設定或傳回按鈕的 tab 鍵控制順序。

我們都知道blur只是針對form表單控制項的，而對於span , div , li 之類的，則沒辦法觸發它們的動作，現在我們只需要設定一個tabindex屬性則可以觸發它們的焦點事件了。

真實專案碼:

複製程式碼 程式碼如下:

PopupMenu.prototype._createPopup=function(){
var popupDiv = $('

'); //建立div
popupDiv.appendTo(this._owner.element); //將div加span
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show=function (){
popupDiv.show();
popupDiv.focus(); //讓div得到焦點
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}

這段程式碼的意思是我用div模擬一個createPopup(IE可以直接產生)，產生的時候給它一個tabindex屬性，然後加入span，然後讓它支援顯示隱藏。特別值得注意的是popupDiv,focus（），必須要給div一個焦點，否則它沒有焦點如何失去焦點。