jQuery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕，右側(cè)彈出一個div輸出對應內(nèi)容的詳細信息。此時，我是希望在鼠標點擊彈出層外的時候關閉該彈出層，主要思想就是：
找到鼠標點擊的那個元素
判斷這個元素是否在指定區(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)點擊任意位置彈出層外關閉彈出層效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
jQuery實現(xiàn)標簽頁效果實戰(zhàn)（4）
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)標簽頁效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JQuery slideshow的一個小問題(如何發(fā)現(xiàn)及解決過程)
在做一個網(wǎng)頁homepage的時候，想用slideshow［1］做圖片切換效果,在打開頁面所以的正常測試都沒問題:當瀏覽器同時打開多個tab，停留他tab中的頁面一段時間后，會出現(xiàn)圖片是最后一張圖片,針對這個問題，本文給予了詳細的解決方法，感興趣的朋友可以了解下2013-02-02
jQuery實現(xiàn)頁面內(nèi)錨點平滑跳轉(zhuǎn)特效的方法總結(jié)
通過jQuery實現(xiàn)頁面內(nèi)錨點平滑跳轉(zhuǎn)的方法很多，可以通過插件hovertreescroll實現(xiàn)，也可以簡單的通過animate方法實現(xiàn)，下面介紹這2種比較簡單的方法。2015-05-05
基于jquery實現(xiàn)的文字向上跑動類似跑馬燈的效果
這篇文章主要介紹了基于jquery實現(xiàn)的文字向上跑動效果類似跑馬燈,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery增加與刪除table列的方法,涉及jQuery針對table表格元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-03-03
海量經(jīng)典的jQuery插件帖 可以根據(jù)需要選擇使用2010-01-01
jquery3和layui沖突導致使用layui.layer.full彈出全屏iframe窗口時高度152px問題
這篇文章主要介紹了解決jquery3和layui沖突導致使用layui.layer.full彈出全屏iframe窗口時高度152px問題,需要的朋友可以參考下2019-05-05
jQuery實現(xiàn)橫向帶緩沖的水平運動效果(附demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)橫向帶緩沖的水平運動效果,涉及jQuery中鼠標事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了jQuery如何設置和獲取HTML、文本和值,需要的朋友可以參考下2014-07-07