Implementation idea of div loss of focus event

First, read the following events (from w3c ).

Blur event: a blur event occurs when the element loses focus.

Focus event: the focus () method is used to assign a focus event to the text domain (also to give some elements a focus event ).

TabIndex attribute: The tabIndex attribute can be set or the return button's tab key control order.

We all know that blur is only for form Controls. For span, div, li, and so on, they cannot be triggered, now we only need to set a tabindex attribute to trigger their focus events.

Real project code:
Copy codeThe Code is as follows:
Esc. PopupMenu. prototype. _ createPopup = function (){
Var popupDiv =$ ('<div tabindex = 1> </div>'); // create a div
PopupDiv. appendTo (this. _ owner. element); // Add the div to the span
Var _ popup = popupDiv [0];
_ Popup. hide = function (){
PopupDiv. hide ();
},
_ Popup. show = function (){
PopupDiv. show ();
PopupDiv. focus (); <span style = "white-space: pre"> </span> // get the div focus
};
PopupDiv. blur (function (){
PopupDiv. hide ();
});
Return _ popup;
}

This Code indicates that I use div to simulate a createPopup (IE can be directly generated). When it is generated, A tabindex attribute is provided, and span is added to it to support display and hiding. It is particularly worth noting that popupDiv, focus (), must give div A focus, otherwise it does not have how to lose the focus.