jQuery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕,右側(cè)彈出一個div輸出對應(yīng)內(nèi)容的詳細信息。此時,我是希望在鼠標點擊彈出層外的時候關(guān)閉該彈出層,主要思想就是:
找到鼠標點擊的那個元素
判斷這個元素是否在指定區(qū)域內(nèi),其實就是判斷它的父元素是不是彈出層
如果不是就對彈出層進行hide,如果是就不進行任何操作
具體實現(xiàn)
該代碼需要使用jQuery,代碼如下:
$(document).mousedown(function(e){ if($(e.target).parent("#info").length==0){ $("#info").hide(); } }) $(document).mousedown(function(e){})
$(document)就是獲取整個網(wǎng)頁文檔對象,類似于原生的window.ducument
mousedown是鼠標事件,是指當鼠標指針移動到元素上方并按下鼠標按鍵時,類似的事件還有:
mouseup:當在元素上放松鼠標按鈕時
mouseover:當鼠標指針位于元素上方時
$(e.target)
$(e.target)表示獲取點擊事件的元素。
parent()
$(e.target).parent("#info").length是獲取當前點擊事件元素帶有id為info的父元素。
以上所述是小編給大家介紹的jQuery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery層級選擇器的實現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)硪黄猨query層級選擇器的實現(xiàn)(匹配后代元素div)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09jquery 獲取 outerHtml 包含當前節(jié)點本身的代碼
jQuery.html() 是獲取當前節(jié)點下的html代碼,并不包含當前節(jié)點本身的代碼,后來實驗發(fā)現(xiàn)有一個jQuery的一個方法可以解決2014-10-10jQuery 1.0.4 - New Wave Javascript(js源文件)
jQuery 1.0.4 - New Wave Javascript(js源文件)...2007-01-01簡單談?wù)刯Query(function(){})與(function(){})(jQuery)
這篇文章主要簡單介紹了jQuery(function(){})與(function(){})(jQuery)的區(qū)別,需要的朋友可以參考下2014-12-12jQuery+css實現(xiàn)百度百科的頁面導(dǎo)航效果
這篇文章主要介紹了jQuery+css實現(xiàn)百度百科的頁面導(dǎo)航效果,需要的朋友可以參考下2014-12-12ajax更新數(shù)據(jù)后,jquery、jq失效問題
這問題遇到兩次,竟然忘記了。所以說不要關(guān)抄人家的方法,要多研究下?,F(xiàn)在做個記錄...2011-03-03jquery實現(xiàn)簡單的二級導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實現(xiàn)簡單的二級導(dǎo)航下拉菜單效果,涉及jquery鼠標事件動態(tài)操作頁面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09