JS阻止冒泡实例cancelBubble

最新推荐文章于 2020-12-07 11:57:39 发布

原创最新推荐文章于 2020-12-07 11:57:39 发布 · 761 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Event</title>
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#div1{width: 300px;height: 300px;background-color: #ccc;display: none;}
</style>

</head>
<body>
	

<input type="button" value="开始" id="button"/>
<div id="div1">1</div>


<script type="text/javascript">
document.onclick=function(ev){
 var eEvent=ev||event;              // ev能在IE6-7用。。event能在高级浏览器用  意为事件对象
 console.log(eEvent.clientX+','+eEvent.clientY);   //clientX用来取鼠标点击的X坐标，同理Y取Y坐标
    
    odiv.style.display='none';

}
var odiv=document.getElementById('div1');
var obutton=document.getElementById('button');
obutton.onclick=function(ev){
	odiv.style.display='block';
         var eEvent=ev||event; 
         eEvent.cancelBubble=true; 
                                      //cancelBubble 用来取消冒泡，stopPropagation是用于同时阻止事件的冒泡和捕获
}



</script>
</body>

</html>