鼠標點擊隱藏div

我創建了對話窗口;並且我希望它們在用戶點擊除對話框窗口按鈕（超鏈接）以外的其他地方時被關閉。鼠標點擊隱藏div

我在對話窗口的後面創建了一個大的「覆蓋」div（0不透明）來捕捉點擊，但是當用戶想要在後面（如另一個超鏈接）同時關閉對話框。由於存在重疊，它將變爲激活狀態（關閉對話框），並且未點擊超鏈接。

不久，我需要一種解決方案，在這種情況下，除非單擊對話框窗口按鈕，否則只要用戶執行任何操作，我都會關閉對話窗口。

我希望這很清楚;謝謝。

來源

2013-04-27 Mia

你可以在這裏粘貼一些代碼，你可以。 – juanpastas 2013-04-27 19:28:55

清理東西很難，我相信我寧願用文字解釋。 – Mia 2013-04-27 19:36:59

http://stackoverflow.com/exout – Xotic750 2013-05-11 10:21:20

-1

充其量，您最好將點擊事件綁定到$（「body」），該事件將檢查用戶單擊的位置，並且如果用戶未單擊對話框中的位置，則可以解除綁定事件並關閉對話框。

來源

2013-04-27 19:57:55

關於這個答案，我可以看到+1沒有不正確的 – cirrus 2013-04-28 00:44:47

這是一個非常基本的演示。屏幕上顯示黃色div，代表您的對話框。如果您點擊div中的任意位置，那麼它仍然是可見的，您可以填寫此div更多的HTML和事件處理程序來執行您想要的操作。點擊div以外的任何地方，div將隱藏。注意：我沒有清理任何事件處理程序，您將要執行此操作。

請參閱answer通過cirrus，他居然給出了關於event propagation，爲什麼你會需要它在你的解決方案，我沒有在這裏做一個解釋。他還給你一個解決方案，使用香草javascript和jquery，我不這樣做。他還演示了我沒有的javascript module pattern。如果沒有他的建設性批評和學費，我不會給你帶來這個答案，這促使我回到這裏，並改進了我最初的可憐時間限制答案。祝你好運。

CSS

.box { 
    width:300px; 
    height:100px; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    background-color:yellow; 
    border:2px solid; 
} 
#message { 
    position: absolute; 
    right: 50%; 
    bottom: 50%; 
} 
#button1 { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 
#button2 { 
    position: absolute; 
    right: 4em; 
    bottom: 0; 
}

HTML

<div id="box" class="box"> 
    <div id="message"></div> 
    <button id="button1"> 
     <img src="http://img856.imageshack.us/img856/3817/ticklf.png" alt />Ok</button> 
    <button id="button2"> 
     <img src="http://img822.imageshack.us/img822/1917/crossn.png" alt />Cancel</button> 
</div>

的JavaScript

function dontBubble(evt) { 
    evt.stopPropagation(); 
} 

function hideBox(evt) { 
    box.hidden = true; 
} 

function messgage() { 
    document.getElementById("message").textContent = "I'm ignoring you"; 
} 

document.getElementById("box").addEventListener("click", dontBubble, false); 
document.getElementById("button1").addEventListener("click", messgage, false); 
document.getElementById("button2").addEventListener("click", hideBox, false) 
document.addEventListener("click", hideBox, false)

;

在jsfiddle

來源

2013-04-27 20:21:34 Xotic750

這是由event bubbling引起的。很遺憾，有兩個人低估了@ Lilith2k3的答案，因爲他沒有錯，@ Xotic750的解決方案太複雜了。您需要在您的身體上使用事件處理程序，但您只需簡單地從對話框中濾除點擊。

您需要兩個onclick()處理程序。一個在你的身體關閉對話框，另一個在你的對話框中取消事件冒泡。見下面

function dlgClickHandler(e) { 
    // do dialog stuff, then... 
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); // cancel event bubbling so body click handler not activated 
} 

function bodyClickHandler(e) { 
    // close dlg 
}

這也是你不能簡單地通過比較對話框的ID做到這一點，是因爲點擊可能來自一個孩子（例如你的確定，取消按鈕）。

工作DEMO
沒有jQuery的DEMO

我已經包裹在一個模塊模式的功能，使之成爲更整潔分量，並且雖然我已經在第一實施例中使用的jQuery（其我懷疑你不是）該技術在jQuery之前。

我懷疑你沒有使用jQuery的原因之一是因爲如果你是你可能已經偶然發現了許多jQuery彈出插件之一來處理這樣的對話框。如果你還沒有試過jQuery看看，它可能會幫助你在很多其他方面。

來源

2013-04-28 00:39:53 cirrus

鼠標點擊隱藏div

回答

相關問題