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

我正在尝试创建一个弹出div（当文本框值更改时），可以通过单击div之外的任何位置将其关闭（可见性：无）。 类似于谷歌建议下拉列表

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

我需要使用javascript和jsp实现这一点

---

请提供帮助。

一种方法是在后面弹出一个覆盖整个屏幕的div（不可见），然后捕获该div上的单击以关闭两个弹出div。您还可以尝试捕获

body

标记上的点击，这将捕获div之外的任何位置的点击（如果事件冒泡，也可以捕获div内部的点击-您可能需要执行一些测试）

有时，一个更简单的方法是使用超时，比如弹出CSS菜单，一旦鼠标离开菜单几秒钟就会消失。您可以捕获

onmouseleave

事件，启动计时器，只要在两秒钟内没有另一个

onmouseenter

，然后隐藏弹出的div

---

希望这有帮助

jquery解决方案是

$("body > div").click(function() {
if ($(this).attr("id") == "div-id") {
    // inside the DIV
} else {
    // not inside the 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>

document.onclick=检查；
功能检查（e）{
var target=（e&&e.target）| |（event&&event.src元素）；
var obj=document.getElementById（'div-id'）；
如果（target！=obj）{obj.style.display='none'}
} 

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

这是因为如果单击发生在内部（在本例中为

.toggle

对象），我们调用

e.stopPropagation（）

以停止单击事件向上传播到整个窗口。 但是，如果单击发生在其他地方，它将直接传播到窗口，并使

.toggle

消失

请参阅如何在JSFIDLE上工作

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

$（函数（）{
$（'.test'）.bind（'click'，函数（e）{
$（'.toggle'）.fadeIn（）；
e、 停止传播（）；
});
$（'.toggle'）.bind（'click'，函数（e）{
e、 停止传播（）；
});
$（document）.bind（'click'，function（）{
$（'.toggle'）.fadeOut（）；
});
});
asdasdsa

一个问题。由于后台div覆盖整个屏幕，因此单击弹出div也会导致div关闭。如果我错了，请纠正我。@kanap008:如果单击事件未冒泡，则不会。您可以使用

window.event.cancelBubble=true

停止事件通过两个div。看看jQuery的

e.stopPropagation（）

在幕后做了什么。你能给我解释一下这一行“var target=（e&&e.target）| |（event&&event.srcElement）；”函数

check

将在单击文档的任何位置时调用，并传递

click

事件。这一行检查事件是否确实作为参数传递给函数（在大多数浏览器中），或者如果不是（其他浏览器，可能是IE），则尝试从全局变量

event

中获取事件。编写纯javascript通常很麻烦，因为必须编写类似的不同代码才能在所有浏览器中正确工作。但是，如果使用jQuery，所有这些都会在幕后处理，因此您不必担心忘记处理特定的浏览器。您真的不必这样做。它只是一个javascript框架，使您能够更轻松地将函数绑定到事件，并在DOM树中定位对象（以及其他对象）。要使这个示例起作用，您所要做的就是从他们的网站下载jquery js，并将其包含在html中，就像我的代码的第一行一样。这个问题可能相关（用于在数组中查找类似于搜索查询的单词）：此外，这里还有一些更相关的问题（用于查找类似单词）：

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