事件冒泡
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个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做法:
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