Question

我试图制作一个弹出式div（当文本框值发生变化时），并且可以通过单击div之外的任何位置来关闭它（可见性：无）。与Google建议下拉列表类似。

如何知道在div或外部发生鼠标点击的天气。

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

请帮忙。

Answer 1

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

有时一种更简单的方法是使用超时，就像弹出的CSS菜单一旦鼠标离开菜单几秒钟就会消失。您可以捕获onmouseleave事件，启动计时器，只要没有其他onmouseenter，比如两秒钟，然后隐藏弹出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代码段会是这样的：

<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

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

这是有效的，因为如果点击发生在（.toggle对象中，在这种情况下），我们调用e.stopPropagation()使点击事件停止向上传播到整个窗口。但是，如果点击发生在其他地方，它会直接传播到窗口并使.toggle消失。

请参阅jsfiddle的example。

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

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

3 个答案: