点击任意位置以关闭内部和外部的div

时间:2013-01-17 08:59:36

标签: javascript

这是一个关闭窗口的jscript,当有人在任何地方点击Div关闭时。 我的问题是当有人通过执行操作点击此窗口时关闭此窗口。

<div id="box"
style="height: 3em; position:absolute; top: 20%; left: 15%; border: 3px double">
<p>Click anywhere outside this box to close it.
</div>
<script>
document.onclick = function (e) {
e = e || event
var target = e.target || e.srcElement
var box = document.getElementById("box")
do {
      if (box == target) {
           // Click occured inside the box, do nothing.
           return
      }
      target = target.parentNode
 } while (target)
 // Click was outside the box, hide it.
 box.style.display = "none"
}
</script>

如何在DIV内发生点击时关闭Div

3 个答案:

答案 0 :(得分:0)

对于在这里讨论的具体事情,我没有测试它,但我认为将该循环更改为以下代码可以实现。

do {
    if (box != target) {
       // Click occured outside the box, do nothing.
       return
    }
    target = target.parentNode
 } while (target)

答案 1 :(得分:0)

在您的HTML代码中,

<div id='box' style='height:10px; width:10px' onclick='CloseMe(this)'>...</div>

实施CloseMe功能

function CloseMe( obj )
{

    obj.style.display = 'none';
}

答案 2 :(得分:0)

如果您使用JQuery,可以使用event.stopPropagation();函数上的click作为div

$(function(){
  $('html').click(function() {
    $('#box').hide();
  });

  $('#box').click(function(event){
      event.stopPropagation();
  });
});

http://jsfiddle.net/nCqwy/1/