JS事件冒泡的阻止

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one_box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            margin: auto;
            padding: 100px;
            background: blue;
        }
        .two_box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: auto;
            padding: 60px;
            background: green;
        }
        .three_box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: auto;
            padding: 30px;
            background: red;
       }
 </style>
</head>
<body>
     <script type="text/javascript">
    function Outside(){
       alert("这是外部的div");
    }
    function Midddle(){
         event.cancelBubble = true; //兼容性更高
         //event.stopPropagation();
         alert("这是中间的div");
    }
    function Inside(){
         event.cancelBubble = true;
         //event.stopPropagation();
         alert("这是内部的div");
    }
    </script>
    <div class="one_box" onclick="Outside()">
        <div class="two_box" onclick="Midddle()">
            <div class="three_box" onclick="Inside()">
            </div>
        </div>
    </div>
</body>
</html> 

原文链接:https://www.idaobin.com/archives/222.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 40 = 44