自动完成搜索建议下拉弹出窗口

Question

我正在尝试制作一个弹出 div（当文本框值更改时），并且可以通过单击 div 外的任何位置来关闭它（可见性：无）。 类似于 Google 建议下拉菜单。

我如何知道鼠标点击是在 div 内部还是外部发生的。

我需要使用 javascript 和 jsp 来实现它。

请帮忙。

Answer 1

这是一个使用 jQuery 的示例。如果单击“测试”文本，则会显示其他文本。单击新出现的文本以外的任何其他位置都会使其消失。

这是因为如果点击发生在内部（在本例中为.toggle 对象），我们调用e.stopPropagation() 来阻止点击事件进一步向上传播到整个窗口。 但是，如果点击发生在其他地方，它会直接传播到窗口并使.toggle 消失。

请参阅 example 在 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>

Answer 2

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 sn-p 会是这样的：

<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 3

一种方法是在后面弹出一个覆盖整个屏幕（不可见）的 div，并捕获对该 div 的点击以关闭两个弹出 div。您还可以尝试捕获对 body 标记的点击，这应该会捕获 div 外部任何位置的点击（或者如果事件冒泡，也可以在 div 内部 - 您可能需要执行一些测试）。

有时更简单的方法是使用超时，例如，一旦您的鼠标离开菜单几秒钟，弹出的 CSS 菜单就会消失。您可以捕捉onmouseleave 事件，启动一个计时器，只要在两秒钟内没有另一个onmouseenter，然后隐藏弹出的div。

希望这会有所帮助！