阻止事件冒泡

Posted 一望无际tiger

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阻止事件冒泡相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset = "utf-8"/>
</head>
<style type="text/css">
#grandpa{width:300px;height:300px;background:green;}
#father{width:200px;height:200px;background:gray;}
#self{width:100px;height:100px;background:pink;}
</style>

<script type="text/javascript">
function self(evt){
 alert("我被打击了") 
  if(event&&event.stopPropagation){//非IE
        event.stopPropagation();
  }else{//IE
        window.event.cancelBubble=true;
  }
 
}
function father(){
  alert("爸爸被打击了") 
}
function grandpa(){
  alert("爷爷被打击了") 
}

</script>
<body>
    <div id="grandpa" onclick="grandpa()">
        <div id="father" onclick="father()">
            <div id="self" onclick="self()">
                我是最内层的哦；
            </div>
        </div>
    </div>
    
  
</body>
</html>

 

以上是关于阻止事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章

阻止事件冒泡和阻止后续代码执行

js函数中 如何阻止事件冒泡

事件冒泡和阻止事件冒泡

js阻止浏览器元素的默认事件与js阻止事件冒泡阻止事件流

最简单冒泡事件及阻止冒泡事件

阻止事件冒泡