如何捕获容器外的点击，来操作容器变化？

有一个<div id="abc" style="height:300px;background:red;"></div>想要的效果是，div当前可见，如果div外鼠标点击，则div内插入一个字符串。而如果点击在div内，则不插入。就是要捕获容器外的鼠标点击事件。谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<script>
function test(){
if(!(window.event.srcElement.id=="abc")){
document.all("abc").innerHTML+="aaaaaaaaaaaaaaaaaaaaaa";
}
}
</script>
</head>
<body onclick="test()">
<div id="abc" style="height:300px;background:red;"></div></body>
</html>
略加改进。IE、chrome、ff没问题。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" onclick="test(event);">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="abc" style="height:300px;background:red;"></div>
<script type="text/javascript">
function test(e){
var targ;
var flag=false;
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
if(!(targ.id=="abc")){
document.getElementById("abc").innerHTML+="添加内容";
}
}
</script>
</body>
</html>
如果 <div  内部还有其它 dom 元素时：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
</head>
<body >
<div  id="abc" style="height:300px;background:red;"><div></div><input id="txtInput"></input></div>
<script type="text/javascript">window.onload=function()
{   var  divShow = document.getElementById("abc");divShow.onclick=function(e)
    {
         e = e||event;
         var t = e.target||e.srcElement
        if(e && e.stopPropagation){
          //W3C取消冒泡事件
          e.stopPropagation();
          }else{
          //IE取消冒泡事件
          window.event.cancelBubble = true;
          }
    };
    document.body.onclick=function(e)
    {
          document.getElementById("txtInput").value+="添加内容";
    };
};
</script>
</body>
</html>
hch126163
你这个好像不工作，有测试过吗？我ie8和firefox下没反应。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
</head>
<body style="height:800px;">
<div id="abc" style="height:300px;background:red;"></div>
<script type="text/javascript">
window.onload=function() { var divShow = document.getElementById("abc");
document.body.onclick = function(e) {
if(+'\v1') {
if(e.target == divShow)
return;
}
else {
if(window.event.srcElement == divShow) {
return;
}
}
divShow.innerHTML+="add content";
};
};
</script>
</body>
</html>
如果div内有其他元素，有冒泡的问题，就是点内部元素时也触发。
body 没有设置css.所以没有点中body.改成 document.onclick 就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body  >
<div id="abc" style="height:300px;background:red;"><div></div><input type="text" id="txtInput"/></div><script type="text/javascript">window.onload=function()
{
  var divShow = document.getElementById("abc");   divShow.onclick=function(e)
  {
  e = e||event;
      if(e && e.stopPropagation){
      //W3C取消冒泡事件
      e.stopPropagation();
      }else{
      //IE取消冒泡事件
      e.cancelBubble = true;
      }
  };
  document.onclick=function(e)
  {
      document.getElementById("txtInput").value+="添加内容";
  };
};
</script>
</body>
</html>