javascript - 单击任意位置以关闭 div 内部和外部

Question

这是一个 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

Answer 1

对于这里讨论的具体内容，我没有对其进行测试，但我认为将循环更改为以下代码可以做到。

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

Answer 2

在您的 HTML 代码中，

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

实现 CloseMe 功能

function CloseMe( obj )
{

    obj.style.display = 'none';
}

Answer 3

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

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

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

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