快捷導(dǎo)航

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

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

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

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

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

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

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

我們都知道blur只是針對(duì)form表單控件的，而對(duì)于 span , div , li 之類(lèi)的，則沒(méi)辦法觸發(fā)它們的動(dòng)作，現(xiàn)在我們只需要設(shè)置一個(gè)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模擬一個(gè)createPopup(IE可以直接生成)，生成的時(shí)候給它一個(gè)tabindex屬性，然后加入span，然后讓它支持顯示隱藏。特別值得注意的是popupDiv,focus（），必須要給div一個(gè)焦點(diǎn)，否則它沒(méi)有焦點(diǎn)如何失去焦點(diǎn)。

您可能感興趣的文章:

相關(guān)文章

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