事件冒泡和冒泡的阻止

2020-2-22    seo達(dá)人

事件冒泡概念：當(dāng)元素觸發(fā)了事件的時(shí)候，會(huì)依次向上觸發(fā)所有元素的相同事件。



事件冒泡的行為演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

     #a{

         background: pink;

         width: 400px;

         height: 400px;

     }

     #b{

         background: green;

         width: 300px;

         height: 300px;

     }

     #c{

         background: red;

         width: 200px;

         height: 200px;

     }

    </style>

</head>

<body>

    <div id="a">

        我是a

          <div id="b">

                我是b

             <div id="c">我是c</div>

          </div>

    </div>

    <script>

     var a = document.querySelector('#a')

     var b = document.querySelector('#b')

     var c = document.querySelector('#c')



     a.onclick = fn1;

     b.onclick = fn2;

     c.onclick = fn3;



     function fn1(){

         alert('a來(lái)了')

     }



     function fn2(){

         alert('b來(lái)了')

     }

     

     function fn3(){

         alert('c來(lái)了')

     }

    </script>

</body>

</html>



上面這段代碼一共有三個(gè)事件,三個(gè)div都分別綁定了單擊事件。在頁(yè)面中當(dāng)單擊c會(huì)連續(xù)彈出3個(gè)提示框。這就是事件冒泡引起的現(xiàn)象。事件冒 泡的過(guò)程是：c --> b --> a 。c冒泡到b冒泡到a。



冒泡的阻止

方法：

1.event.stopPropagation(); 是事件對(duì)象Event的一個(gè)方法，作用是阻止目標(biāo)元素事件冒泡到父級(jí)元素 2.event.cancelBubble = true; IE瀏覽器的方法



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

     #a{

         background: pink;

         width: 400px;

         height: 400px;

     }

     #b{

         background: green;

         width: 300px;

         height: 300px;

     }



      #c{

         background: red;

         width: 200px;

         height: 200px;

     }

    </style>

</head>

<body>

    <div id="a">

        我是a

          <div id="b">

                我是b

             <div id="c">我是c</div>

          </div>

    </div>

    <script>

     var a = document.querySelector('#a')

     var b = document.querySelector('#b')

     var c = document.querySelector('#c')



     a.onclick = fn;

     b.onclick = fn;

     c.onclick = fn;



     function fn(event){

         var e = window.event || event;

         // 事件冒泡的阻止

         if(e.stopPropagation){

            e.stopPropagation();  // 通用寫(xiě)法

         }else{

             e.cancelBubble = true; // 阻止IE

         }

         var str = this.innerHTML;

         alert(str)

     }

    </script>

</body>

</html>


日歷

鏈接

個(gè)人資料

存檔