当我们点击子元素，触发的时事件会传递给父元素，这就是事件冒泡。这时候为了不让父元素受影响就要阻止冒泡，window.event? window.event.cancelBubble = true : e.stopPropagation();这就是阻止冒泡，更多JS技术交流进裙前面是三位数2九六，中间也是三位数，5九一，后边也是三位数2九零。
创新互联主营美兰网站建设的网络公司,主营网站建设方案,app软件定制开发,美兰h5成都微信小程序搭建,美兰网站营销推广欢迎美兰等地区企业咨询
1、cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。
例子：
function stopBubble(e)
{
if (e e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了
冒泡：想象一下你在水底呼出一口气。。。。泡泡由内往外。。所以冒泡是从最内层往最外层
就是子级到父级的过程。。。
想象一下（div比图片大的多）你只想点击div中的图片一下。。。这一下力道深厚穿透图片后劲打到div上。。。恰巧div也有被点击的事件，那这不就尴尬了。。。这时候就要阻止冒泡
让劲停在图片上就好了不要穿透他
浏览器中对事件的处理机制默认为事件冒泡，例如
div id='div1'div id='div2'div id='div3'/div/div/div
#div1{ width: 500px;height: 500px; background: rgb(12,42,31);}#div2{ width: 450px;height: 450px; background: rgb(212,142,1);}#div3{ width: 350px;height: 350px; background: rgb(1,242,153);}
绑定click事件：
div1.onclick=function(){ alert("div1")}div2.onclick=function(){ alert("div2")}div3.onclick=function(){ alert("div3")}
此时，当单击中间的div3时，先后弹出div3, div2, div1，此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡：
div1.addEventListener('click',function(obj){ alert("div1")},true);//如果未false则为事件冒泡，不填的话，默认falsediv2.addEventListener('click',function(obj){ alert("div2")},true);div3.addEventListener('click',function(obj){ alert("div3")},true);
这里将第三个参数设为true，指定事件处理机制为事件捕获。此时再次单击div3时，会依次弹出div1, div2, div3，与之前的相反。
而IE中只有事件冒泡，且没有addEventListener事件，取而代之的是attachEvent。
但是有时候，我们不喜欢出现事件冒泡或者捕获，希望单击div3时，只弹出div3。这时就要用到下面阻止事件冒泡的方法。
1. 阻止冒泡事件
主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上，在事件传播的任何阶段都能使用。使用方法如下（兼容IE）：
function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }
2. 阻止默认事件
像submit这类的表单元素，都会绑定默认事件，如果不阻止默认事件，则绑定的其他方法也会无效。使用方法如下（兼容IE）：
function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false;}
当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。事件的冒泡和捕获捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素。在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。 var fnClick = function() { alert("Clicked!"); } var oDiv = document.getElementById("div1"); oDiv.attachEvent("onclick", fnClick); oDiv.detachEvent("onclick", fnClick); 事件的冒泡有什么好处想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中： function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。 function editCell(e) { var target = getEventTarget(e); if(target.tagName.toLowerCase() === 'td') { // DO SOMETHING WITH THE CELL } } 在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。事件冒泡的优点和缺点那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。 阻止冒泡 body{ color:#333; font-size:12px; } 什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候. body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡.... 在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡! 请单击下面的列表.会触发body事件 项目1 项目2 项目3 请单下面的列表.不会触发body事件. 项目1 项目2 项目3 document.body.onclick = function(){//首先为body元素绑定一个单击事件 alert("BODY事件");//单击页面即弹出对话框 } function att_Event(){//为第一组li元素绑定onclick事件 var li = document.getElementById("lia").getElementsByTagName("li"); for(var i=0;i
js阻止冒泡
在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。
复制代码 代码如下:
function stopPro(evt){
var e = evt || window.event;
//returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，
//可以取消发生事件的源元素的默认动作。
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
}
