Div onblur событие вызывается при установке флажка внутри div - PullRequest
Новая
       13

Div onblur событие вызывается при установке флажка внутри div

1 голос
/ 02 октября 2009

У меня есть всплывающее окно div, и я хочу скрыть его, когда пользователи нажимают за пределами div. Внутри div у меня есть флажок ...

Проблема в том, что событие div onblur вызывается при попытке установить флажок. Я положил код cancelEventBubble на нажатие флажка, но onblur срабатывает до события включения флажка ...

есть идеи или предложения? Это кажется таким простым, но не так просто ...

С уважением, Альберт 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<style type="text/css">
.popup
{
    display: none;
    position: relative;    
    border: solid 1px black;
    width: 100px;
    left: 100px;
    top: 100px;
}

.lookupButton
{
    width: 15px;
    height: 20px;
    background-color: blue;
}

.lookup
{
    border: solid 1px green;
}
</style>
<script language="javascript" type="text/javascript">
var popupVisible = false;

function cancelEventBubble(e) {
     if (!e) var e = window.event;
     e.cancelBubble = true;
     if (e.stopPropagation) e.stopPropagation();
}

function showPopup(obj)
{
    if (!popupVisible)
    {
        popupVisible = true;
        document.getElementById("popup").style.display = "block";
        document.getElementById("popup").focus();
    }
    else
    {
        popupVisible = false;
        document.getElementById("popup").style.display = "";
    }
}

function hidePopup()
{
    popupVisible = false;
    document.getElementById("popup").style.display = "";
}

function setTextValue(obj)
{
    var combo = document.getElementById("cbo1");
    if (combo.value.indexOf(obj.value) == -1)
    {
        combo.value += obj.value + "; ";
    }
    else
    {
        combo.value = combo.value.replace(obj.value + "; ", "");
    }
}

</script>
</head>
<body>
<table><tr><td>
    <input readonly="readonly" type="text" name="cbo1" id="cbo1" />
</td><td>
    <div class="lookupButton" onclick="showPopup(this);"></div>
</td></tr></table>

<div id="popup" class="popup" onblur="hidePopup()">
    <input id="chk0" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="John" />John<br />
    <input id="chk1" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Jack" />Jack<br />
    <input id="chk2" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="James" />James<br />
    <input id="chk3" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Richard" />Richard<br />
    <input id="chk4" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Tim" />Tim<br />
</div>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 02 октября 2009

В современных браузерах событие onblur не запускается с элементами div, кросс-браузерный подход, который также может решать проблемы IE, может заключаться в использовании делегирования события ,привязка обработчика события щелчка к документу и скрытие всплывающего окна, когда элемент, по которому щелкнули, не является флажком или lookupButton, например: 

document.onclick = function (e) { 
  e = e || window.event; 
  var element = e.target || e.srcElement; 

  if (element.tagName != "INPUT" && element.type != "checkbox" &&
      element.className != "lookupButton") { 
    hidePopup(); 
  } 
};

Проверьте приведенный выше пример с остальным кодом здесь .

0 голосов
/ 02 октября 2009

Попробуй пойти другим путем. Используйте трехслойный подход, где нижний слой - это обычная страница, верхний слой - это ваш всплывающий элемент div, а средний слой - это прозрачный полноэкранный div-элемент «catch-all», который имеет событие onfocus, закрывающее ваше всплывающее окно вместо использования onblur).

Если вы предоставите некоторый код, вам будет легче помочь с вашим подходом.

...