解决js中鼠标事件冒泡问题

最新推荐文章于 2022-06-17 14:29:39 发布

zengkulou

最新推荐文章于 2022-06-17 14:29:39 发布

阅读量612

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zengkulou/article/details/8753217

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <script language="javascript">	
	function hideMsgBox(theEvent){ 
		if (theEvent){
			var browser=navigator.userAgent;   //取得浏览器属性
			if (browser.indexOf("MSIE")>0){  //如果是IE
				if (document.getElementById('inner').contains(event.toElement) 
					|| document.getElementById('outer').contains(event.toElement)) {
					return; 
				 }
			}else{
				if (document.getElementById('inner').contains(theEvent.relatedTarget) 
					|| document.getElementById('outer').contains(event.toElement)) { 
					return;
				} 
			}
		}
        var test = document.getElementById("test");
		var display = test.style.display;
		test.style.display = "none";
	}
	
	function show(){
		var test = document.getElementById("test");
		var display = test.style.display;
		if(display == "block"){
			test.style.display = "none";
		}else{
			test.style.display = "block";
		}
	}
	</script>
  </head>
  
  <body>
    <div id="outer" style="width:100px;margin:0px;padding:0px;background-color:lightblue;line-height:29px;cursor:pointer;"
	οnmοuseοut="hideMsgBox(event)" οnclick="show()">
	<div id="inner" style="display:inline;margin-right:30px;border:1px red solid;">aaaa</div>aaaa</div>
	
	<div id="test" style="margin:0px;padding:0px;background-color:pink;width:100px;height:80px;display:none;">123</div>
  </body>
</html>