выпадающее меню с автозаполнением

Question

Я пытаюсь создать всплывающий элемент div (при изменении значения текстового поля), и его можно закрыть (видимость: нет), щелкнув в любом месте за пределами элемента div. Аналогично выпадающему предложению Google.

Как узнать, произошел ли щелчок мыши внутри div или снаружи.

Мне нужно реализовать это, используя javascript и jsp.

Пожалуйста, помогите.

Answer 1

Решение jquery будет

$("body > div").click(function() {
if ($(this).attr("id") == "div-id") {
    // inside the DIV
} else {
    // not inside the DIV
}
});

или

$("html").click(function (e)
{
if (e.target == document.getElementById("div-id"))
    alert("Inside DIV");
else
    alert("Outside DIV!");
});

или фрагмент Javascript будет выглядеть примерно так:

<script type="text/javascript"> 
document.onclick=check; 
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 
var obj = document.getElementById('div-id'); 
if(target!=obj){obj.style.display='none'} 
} 
</script>

Answer 2

Один из методов заключается в том, чтобы открыть всплывающий элемент, который покрывает весь экран (невидимый), и захватывать щелчки на этом элементе, чтобы закрыть оба всплывающих элемента. Вы также можете попробовать захватывать клики по тегу body, и это должно отлавливать щелчки в любом месте за пределами div (или внутри div, а также, если события всплывают - возможно, вы захотите выполнить некоторое тестирование).

Иногда более простым способом является использование тайм-аута, например всплывающих меню CSS, которые исчезают, как только ваша мышь отключается от меню в течение пары секунд. Вы можете перехватить событие onmouseleave, запустить таймер и, если, скажем, не будет onmouseenter, скажем, двух секунд, скрыть всплывающий элемент div.

Надеюсь, это поможет!

Answer 3

Вот пример с jQuery. Если вы нажмете на «тестовый» текст, вы увидите другой текст. Если щелкнуть где-либо еще, кроме только что появившегося текста, он исчезнет.

Это работает, потому что если щелчок произошел внутри (в данном случае объект .toggle), мы вызываем e.stopPropagation(), чтобы событие щелчка прекратило распространение дальше вверх по всему окну. Однако, если щелчок произошел где-то еще, он распространяется прямо в окно и заставляет .toggle исчезнуть.

См. пример его работы на jsfiddle.

<script src="js/jquery-1.4.4.min.js"></script>
<script>
    $(function(){
        $('.test').bind('click', function(e){ 
            $('.toggle').fadeIn(); 
            e.stopPropagation();
        });
        $('.toggle').bind('click', function(e){ 
            e.stopPropagation(); 
        });
        $(document).bind('click', function(){ 
            $('.toggle').fadeOut(); 
        });
    });
</script>

<a class="test" href="#">test</a>
<div class="toggle">asdasdsa</div>