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

saveglobe 2011-03-28 10:43:38

有一个<div id="abc" style="height:300px;background:red;"></div>

想要的效果是，div当前可见，如果div外鼠标点击，则div内插入一个字符串。而如果点击在div内，则不插入。

就是要捕获容器外的鼠标点击事件。

谢谢

...全文

167 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

潮起潮落 2011-03-28

打赏
举报

略加改进。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>

saveglobe 2011-03-28

打赏
举报

[Quote=引用 4 楼 knightzhuwei 的回复:]
以上适用于IE
[/Quote]
那firefox怎么办呢？

knightzhuwei 2011-03-28

打赏
举报

以上适用于IE

knightzhuwei 2011-03-28

打赏
举报



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

hch126163 2011-03-28

打赏
举报

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>

saveglobe 2011-03-28

打赏
举报

[Quote=引用 9 楼 cj205 的回复:]
HTML code
<!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 ……
[/Quote]
如果div内有其他元素，有冒泡的问题，就是点内部元素时也触发。

Mr-Jee 2011-03-28

打赏
举报

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

saveglobe 2011-03-28

打赏
举报

[Quote=引用 7 楼 hch126163 的回复:]
如果 <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" >
……
[/Quote]
hch126163
你这个好像不工作，有测试过吗？我ie8和firefox下没反应。

hch126163 2011-03-28

打赏
举报

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