單擊鼠標隱藏div

Question

我已經創建了對話框窗口； 而且我希望每當用戶單擊對話框窗口按鈕（超鏈接）以外的任何位置時，將它們關閉。

我在對話框窗口的后面創建了一個大的“疊加” div（0透明度）來捕獲點擊，但是當用戶想要在后面敲東西（如另一個超鏈接）以及關閉對話框時，這變得很成問題與此同時。 由於存在疊加層，因此它會被激活（關閉對話框），並且不會捕獲單擊的超鏈接。

很快，對於這種情況，我需要一個解決方案，在這種情況下，只要用戶執行任何操作（單擊對話框窗口按鈕除外），我都會關閉對話框窗口。

我希望這很清楚。 謝謝。

Answer 1

這是由事件冒泡引起的。 遺憾的是，有2個人對@ 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來完成此操作的原因，因為單擊可能來自其中一個子項（例如，您的“確定”，“取消”按鈕）。

• 工作演示
• 沒有jQuery DEMO

我將功能包裝在模塊模式中，使其成為更整潔的組件，盡管在第一個示例中使用了jQuery（我懷疑您不是），但該技術早於jQuery。

我懷疑您不使用jQuery的原因之一是因為如果您使用的話，可能已經偶然發現了許多用於處理此類對話框的jQuery彈出插件之一。 如果您還沒有嘗試過jQuery，它可能也會以許多其他方式幫助您。

Answer 2

這是一個非常基本的演示。 屏幕上的黃色div代表您的對話框。 如果你點擊任何地方div那么它仍然可見，你可以填補這個div更多的HTML和事件處理程序做你的願望。 單擊div之外的任何位置， div將被隱藏。 注意：我不會清理任何事件處理程序，您將要做。

請參閱cirrus的答案 ，他實際上在其中解釋了事件傳播以及為什么您需要在解決方案中使用它，我在這里還沒有做過。 他還為您提供了使用香草javascript和jquery的解決方案，而我沒有。 他還演示了我沒有的javascript模塊模式 。 沒有他的建設性批評和學費 ，我將無法為您提供這個答案，這促使我回到這里，改進了我最初的，受時間限制的可憐答案。 祝好運。

的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上

Answer 3

充其量，您可以將$ click事件綁定到$（“ body”），后者檢查用戶單擊的位置，如果用戶不在對話框中單擊，則可以取消綁定該事件並關閉對話框。