js基础—取消冒泡和阻止默认事件

1、取消冒泡

（1）冒泡解除

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，会从结构上的子元素冒泡向父元素。（自底向上）

我们经常遇到事件出现冒泡，但又不需要冒泡的情况，这时候就要取消冒泡。例如我给docunment绑定了一个点击事件alert弹出，给div加了一个点击事件改变背景颜色。这时候就会发生冒泡。先弹出alert框，然后背景颜色改变。符合事件冒泡规则。

[code]   <style>#myDiv{width: 200px;height: 200px;background-color: pink;}</style><div id=\"myDiv\"></div><script>document.onclick=function(){alert(\"这是一个事件\")}var myDiv=document.getElementById(\"myDiv\");myDiv.onclick=function(e){myDiv.style.backgroundColor=\"green\";}

执行过程：

这里我想在div点击时间执行时，解除事件冒泡 ，该怎么做呢？

• W3C标准 event.stopPropagation();但不支持ie9以下版本
• IE独有 event.cancelBubble = true;

这里，我们用事件对象(Event)的一个方法stopPropagation，作用是阻止目标元素的冒泡事件

[code]  document.onclick=function(){alert(\"这是一个事件\")}var myDiv=document.getElementById(\"myDiv\");myDiv.onclick=function(e){//解除冒泡e.stopPropagation();//w3c标准//e.cancelBubble = true;//ie独有，谷歌也支持myDiv.style.backgroundColor=\"green\";}

 (2)封装一个stopBubble函数，阻止冒泡

[code]   document.onclick=function(){alert(\"这是一个事件\")}var myDiv=document.getElementById(\"myDiv\");myDiv.onclick=function(e){stopBubble(e);//调用封装好的函数myDiv.style.backgroundColor=\"green\";}function stopBubble(e){if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}}

2、阻止默认事件

默认事件 — 表单提交，a标签跳转，右键菜单等

（1）默认事件阻止

• return false;  句柄式御用，以对象属性的方式注册的事件才生效
• event.preventDefault(); W3C标注，IE9以下不兼容
• event.returnValue = false; 兼容IE

[code]  document.oncontextmenu=function(){//阻止右键出菜单// return false;//以对象属性的方式注册的事件才生效// event.preventDefault();//W3C标注，IE9以下不兼容event.returnValue = false;//兼容IE}

（2）封装阻止默认事件的函数 cancelHandler();

[code]  document.oncontextmenu=function(e){if(e.preventDefault){e.preventDefault();}else{event.returnValue = false;}}

练习：取消a标签跳转

方法一：

[code] var a=document.getElementsByTagName(\"a\")[0];a.onclick=function(){return false;}

方法二：

[code]    <a href=\"javascript:void(false)\">新的网页</a>//void()里面的就是返回值，相当于return false