js事件冒泡、阻止事件冒泡以及阻止默认行为

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

什么是事件冒泡

<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<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">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>
<body onclick="alert('body')">
    <!--html-->
    <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
            <div id="div2" style="width:300px; height:300px; background:palevioletred">
                    <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
                            <div id="div1" style="width:100px; height:100px; background:palegreen">
                                <a id="aaa" href="http://www.baidu.com">aaa</a> 
                            </div>
                    </div>
            </div>
    </div>

    <script>
        //此jquery既阻止默认行为又停止冒泡
        // $("#div1").on('click',function(){
        //     return false;
        // });

        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');

            oDiv1.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div1");
                
                //js阻止事件冒泡
                //oEvent.cancelBubble = true;
                //oEvent.stopPropagation();

                //js阻止链接默认行为，没有停止冒泡
                //oEvent.preventDefault(); 
                //return false;
            }

            oDiv2.onclick = function (ev){
                var oEvent = ev || event;
                alert("this is div2");
                oEvent.cancelBubble = true; 
            }
        }
    </script>
</body>
</html>

js事件冒泡、阻止事件冒泡以及阻止默认行为

JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。

js做法：

1 function stopPropagation(e) {  
2     e = e || window.event;  
3     if(e.stopPropagation) { //W3C阻止冒泡方法  
4         e.stopPropagation();  
5     } else {  
6         e.cancelBubble = true; //IE阻止冒泡方法  
7     }  
8 }

或者如下:

1 function stopPro(evt){ 
2     var e = evt || window.event; 
3     //returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle， 
4     //可以取消发生事件的源元素的默认动作。 
5     //window.event?e.returnValue = false:e.preventDefault();//默认事件 
6     window.event?e.cancelBubble=true:e.stopPropagation(); 
7 }

jQuery做法：

方式一：event.stopPropagation();

1 $("#div1").mousedown(function(event){ 
2     event.stopPropagation(); //阻止冒泡事件，上级的xxx事件不会被调用，但不阻止事件本身
3 });

方式二：return false;

1 $("#div1").mousedown(function(event){ 
2     return false; //不仅阻止了事件往上冒泡，而且阻止了事件本身 
3 });

原文1链接：http://www.cnblogs.com/jsanntq/p/7681942.html

原文2链接 https://www.cnblogs.com/yycode/articles/5499126.html

js事件冒泡、阻止事件冒泡以及阻止默认行为

事件冒泡

什么是事件冒泡

相关推荐