DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery實現點擊任意位置彈出層外關閉彈出層效果
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實現點擊任意位置彈出層外關閉彈出層效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved