在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题。
1.阻止事件冒泡
function stopBubble(e) {//如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法 e.stopPropagation();else//否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}
2.当按键后或者点击一个链接后，不希望按键或者链接执行时,可以取消返回值.即停止默认事件默认行为
//阻止浏览器的默认行为function stopDefault( e ) {//阻止默认浏览器动作(W3C)if ( e && e.preventDefault )e.preventDefault();//IE中阻止函数器默认动作的方式elsewindow.event.returnValue = false;return false;}
示例 :点击页面的任何URL链接 不跳转。
var links=document.getElementsByTagName('a');for(var i=0;i<links.length;i++){links[i].onlick=function(e){alert('我不跳转，点我也没用');stopDefault(e)}}
另一个阻止冒泡常见的应用就是下拉菜单的效果，点击按钮，下拉菜单显示，在点击页面任何其它部分，下拉菜单隐藏。
//给document添加点击事件，点击时关闭菜单，默认情况下，点击任何元素，都会冒泡的到documentdocument.onclick=function(){b.style.display="none";}//为点击元素显示下拉菜单的元素阻止冒泡，这样document的click事件就被阻止执行function showMenu(e) {var e=window.event || e;下拉菜单.style.display="block";if(e.stopPropagation){e.stopPropagation()}else{e.cancelBubble=true;}}点击按钮.onclick=下拉菜单.οnclick=showMenu;
