jQuery實現點擊任意位置彈出層外關閉彈出層效果_jquery

在之前做項目的時候經常會在首頁面上點擊某個按鈕，右側彈出一個div輸出對應內容的詳細資料。此時，我是希望在滑鼠點擊彈出層外的時候關閉該彈出層，主要思想就是：

找到滑鼠點擊的那個元素

判斷這個元素是否在指定地區內，其實就是判斷它的父元素是不是彈出層

如果不是就對彈出層進行hide，如果是就不進行任何操作

具體實現

該代碼需要使用jQuery,代碼如下：

$(document).mousedown(function(e){if($(e.target).parent("#info").length==0){$("#info").hide();}})$(document).mousedown(function(e){})

$(document)就是擷取整個網頁文檔對象，類似於原生的window.ducument

mousedown是滑鼠事件，是指當滑鼠指標移動到元素上方並按下滑鼠按鍵時，類似的事件還有：

mouseup:當在元素上放鬆滑鼠按鍵時

mouseover：當滑鼠指標位於元素上方時

$(e.target)

$(e.target)表示擷取點擊事件的元素。

parent()

$(e.target).parent("#info").length是擷取當前點擊事件元素帶有id為info的父元素。

以上所述是小編給大家介紹的jQuery實現點擊任意位置彈出層外關閉彈出層效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！