div失去焦點(diǎn)事件實(shí)現(xiàn)思路

更新時間：2014年04月22日 15:50:11 作者：

blur只是針對form表單控件的，而對于 span , div , li 之類的，則沒辦法觸發(fā)它們的動作，本文有個示例，看看是怎么實(shí)現(xiàn)的

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

blur事件: 當(dāng)元素失去焦點(diǎn)時發(fā)生 blur 事件。

focus事件:focus() 方法用于賦予文本域焦點(diǎn)(也值讓某些元素得到焦點(diǎn)事件)。

tabIndex屬性:tabIndex 屬性可設(shè)置或返回按鈕的 tab 鍵控制次序。

我們都知道blur只是針對form表單控件的，而對于 span , div , li 之類的，則沒辦法觸發(fā)它們的動作，現(xiàn)在我們只需要設(shè)置一個tabindex屬性則可以觸發(fā)它們的焦點(diǎn)事件了。

真實(shí)項(xiàng)目代碼:

復(fù)制代碼代碼如下:

 
Esc.PopupMenu.prototype._createPopup=function(){ 
var popupDiv = $('<div tabindex=1></div>'); //創(chuàng)建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得到焦點(diǎn) 
}; 
popupDiv.blur(function(){ 
popupDiv.hide(); 
}); 
return _popup; 
} 

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

您可能感興趣的文章:

相關(guān)文章

微信小程序上線發(fā)布具體流程簡析
眾所周知,微信小程序制作成功后,是需要提交到微信公眾平臺去審核的,審核通過后,才可以發(fā)布上線的,上線了之后才可以進(jìn)行運(yùn)營的,下面這篇文章主要給大家介紹了關(guān)于微信小程序上線發(fā)布具體流程的相關(guān)資料,需要的朋友可以參考下
2022-10-10
js前端面試之同步與異步問題詳解
這篇文章主要給大家介紹了關(guān)于js前端面試之同步與異步問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
javascript css在IE和Firefox中區(qū)別分析
我們討論的主題CSS網(wǎng)頁布局，最令大家頭疼的問題就是瀏覽器兼容性，雖然52CSS.com介紹過很多這方向的知識，但依然讓很多開發(fā)人員暈頭轉(zhuǎn)向，今天的這篇文章，將列出css和javascript在IE和Firefox中二十三個不同點(diǎn)，希望對大家的學(xué)習(xí)有所幫助。
2009-02-02
使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果
在ECSHOP的目錄/JS/common.js中有一個openSpeDiv方法是實(shí)現(xiàn)ECSHOP的彈窗效果的。接下來通過本文給大家分享使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果，需要的朋友參考下
2017-03-03
JavaScript中的變量提升和函數(shù)提升
這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對變量進(jìn)行操作后打印值經(jīng)常會出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個叫做變量提升的功能
2022-07-07
基于JavaScript實(shí)現(xiàn)回到頁面頂部動畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁面頂部動畫代碼的相關(guān)資料,代碼簡單易用，非常實(shí)用，需要的朋友可以參考下
2016-05-05
JS的IE和Firefox兼容性集錦
JS的IE和Firefox兼容性集錦...
2006-12-12
小程序選項(xiàng)卡以及swiper套用（跨頁面）
這篇文章主要為大家詳細(xì)介紹了小程序選項(xiàng)卡以及swiper套用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁
本文主要介紹了js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁面任何位置返回
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁面任何位置返回的實(shí)例代碼,需要的朋友可以參考下
2016-08-08