Скрыть div по щелчку мыши

Question

Я создал диалоговые окна; и я хочу, чтобы они закрывались всякий раз, когда использует клики в любом месте, кроме кнопок диалогового окна (гиперссылки).

Я создавал один большой «оверлей» div (0 opacity) в задней части диалогового окна, чтобы поймать клики, но это становится довольно проблематичным, когда пользователь хочет захлопнуть что-либо сзади (например, другую гиперссылку) как закрытие диалога одновременно. Поскольку есть оверлей, он активируется (для закрытия диалога), и гиперссылка с нажатой клавишей не зацепилась.

Вскоре мне нужно решение для этой ситуации, когда я закрываю диалоговые окна всякий раз, когда пользователь делает что-либо, кроме нажатия кнопок диалогового окна.

Надеюсь, это ясно; Спасибо.

Answer 1

В лучшем случае вы должны привязать событие click к значению $ ("body"), которое проверяет, куда щелкнул пользователь, и в случае, если пользователь не нажал кнопку в диалоговом окне, вы можете отменить событие и закрыть диалоговое окно.

Answer 2

Это очень простая демонстрация. У нас есть желтый div на экране, который представляет ваш диалог. Если вы щелкните в любом месте в div, тогда он останется видимым, вы можете заполнить это div большим количеством обработчиков HTML и событий, чтобы делать все, что хотите. Щелкните где-нибудь за пределами div, и div станет скрытым. Примечание. Я не очищаю обработчики событий, которые вы захотите сделать.

Пожалуйста, смотрите answer по cirrus, где он на самом деле дает объяснение о event propagation и почему вам нужно это в своем решении, которое я не сделал здесь. Он также дает вам решение с использованием ванильного javascript и jquery, чего я не знаю. Он также демонстрирует javascript module pattern, где у меня его нет. Я бы не смог дать вам этот ответ без его конструктивной критики и tuition, что побудило меня вернуться сюда и улучшить свой первоначальный бедный, ограниченный временем ответ. Удачи.

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

Это была вызвана event bubbling. Жаль, что 2 человека отказались от ответа @ Lilith2k3, потому что он не ошибся, и у Xotic750 было слишком сложное решение. Вам нужен do нужен обработчик событий на вашем теле, но вам нужно просто отфильтровать клики из вашего диалога.

Вам нужны два обработчика 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 
} 

Это также причина, вы не можете сделать это, просто сравнивая идентификатор диалогового окна, потому что щелчок может исходить от одного из детей (например. Ваш OK, отменить кнопки).

• Работа DEMO
• Без JQuery DEMO

Я завернула функции в шаблоне модуля, чтобы сделать его компонент аккуратнее, и хотя я использовал JQuery в первом примере (который Я подозреваю, что вы не являетесь) техникой предварительной даты jQuery.

Одна из причин, по которой я подозреваю, что вы не используете jQuery, заключается в том, что, если бы вы были, вы, вероятно, уже наткнулись на один из множества всплывающих плагинов jQuery для передачи таких диалоговых окон. Если вы не пробовали использовать jQuery, это может помочь вам и другим способом.