阻止冒泡和浏览器默认行为

    xiaoxiao2021-04-15  33

    冒泡

    <!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> .box1{ height: 500px; width:500px; background:red; } .box2{ height: 300px; width:300px; background:green; } .box3{ height: 100px; width:100px; background:blue; } </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"> </div> </div> </div> </body> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementsByClassName('box1')[0] var box2 = document.getElementsByClassName('box2')[0] var box3 = document.getElementsByClassName('box3')[0] box1.onclick = function(e){ console.log('单击了红色的'); } box2.onclick= function(){ console.log('单击了绿色'); } box3.onclick=function(e){ //如果提供了事件对象,则这是一个非IE浏览器 if(e&e.stopPropagation) //W3C的方法 e.stopPropagation(); else //这是IE的方式 window.event.cancelBubble = true; console.log('单击了蓝色的'); } } </script> </html>

    上述例子 最里面的蓝色块已经被阻止了冒泡,绿色块是有冒泡的。

    //阻止浏览器默认行为 function stopDefault(e){ //阻止默认浏览器动作(W3C) if(e&&e.preventDefault) e.preventDefault(); //IE中阻止浏览器默认动作的方式 else window.event.trturnValue = false; return false; }
    转载请注明原文地址: https://ju.6miu.com/read-671987.html

    最新回复(0)