Implementation ideas for div losing focus event_javascript skills

To read this article, you must first understand the following events (excerpted from w3c).

blur event: The blur event occurs when an element loses focus.

focus event: The focus() method is used to give focus to the text field (it also allows certain elements to get focus events).

tabIndex attribute: The tabIndex attribute can set or return the tab key control order of the button.

We all know that blur is only for form controls, but for span, div, li and the like, there is no way to trigger their actions. Now we only need to set a tabindex attribute to trigger their focus. event.

Real project code:

Copy code The code is as follows:

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

'); //Create div
popupDiv.appendTo(this._owner.element ); //Add span to div
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show =function(){
popupDiv.show();
popupDiv.focus(); //Let the div get focus
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}

This paragraph The meaning of the code is that I use div to simulate a createPopup (IE can generate it directly), give it a tabindex attribute when generating it, then add span, and then make it support display and hiding. Particularly noteworthy is popupDiv, focus(). You must give the div a focus, otherwise it will lose focus if it has no focus.