JavaScriptは事件のバブルを防ぐ.

1375 ワード

今日は独学でコードを打つ時に問題を発見しました.その時の例は次の通りです.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        height: 200px;
        width: 200px;
        background-color: #3b7796;
    }
    #btn{
        margin: 50px;
    }
</style>
<script>
    function fn1(){
        alert("this is div");
    }

    function fn2(){
        alert("this is btn");
    }
</script>
<body>
    <div id="div1" onclick="fn1();">
        <button id="btn" onclick="fn2();">btn</button>
    </div>
</body>
</html>

btnをクリックすると、div上のクリックイベントが発生し、2つのアラームボックスが表示されます.
この原因は事件の泡が発生したためです.コードを修正します.

    function fn2(e){

        //        ，     event       IE
        if(e &&  e.stopPropagation){
            e.stopPropagation();
        }else {
            //IE        
            window.event.cancelBubble = true;
        }


        alert("this is btn");
    }

このようにして事件の泡が立つのを阻止しました.

バックグラウンドデータをページに転送