js中阻止事件冒泡与阻止事件默认行为-蒲公英云

js中阻止事件冒泡与阻止事件默认行为

一、冒泡事件

我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。那么如何有效的阻止冒泡事件的发生？其实在非IE浏览器中提供了一个事件对象 stopPropagation，那么在IE浏览器中有没有一个对象去阻止冒泡事件呢，答案是肯定的，通过cancelBubble事件对象可以阻止。

冒泡事件我在点击打开链接中有更加详细的介绍，如果想要了解更多可以点击进去查看。此处我们直接举例子（阻止事件冒泡的两种兼容处理）

function stopBubble(ev) {    
  if(ev && ev.stopPropagation){    
      ev.stopPropagation();  //非IE下  
  } else {    
    window.event.cancelBubble = true;  //IE下  
  }    
};

也可以是

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

默认事件：

浏览器的默认事件就是浏览器自己的行为，比如我们在点击的时候，浏览器跳转到指定页面。还有，当我们滚动鼠标时页面会向下滚动，但我们按空格键和按方向键时页面也会向下滚动，为了更好的用户体验，这时我们就需要阻止这种行为的发生。

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函数器默认动作的方式  
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默认浏览器动作(W3C)  
    e.preventDefault(); 
  }  
}

这种是兼容性写法，但是如果你只需要支持高版本浏览器的话，那么如上文一样，一句话即可。

obj.onclick = function (){ 
  return false; 
}

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡

//原生js，只会阻止默认行为，不会停止冒泡
 var a = document.getElementById("testA");
 a.onclick = function(){
     return false;//当然 也阻止了事件本身
 };

既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。 //仅仅是在HTML事件属性和 DOM0级事件处理方法中

才能通过返回 return false 的形式组织事件宿主的默认行

//jQuery，既阻止默认行为又停止冒泡
 $("#testA").on('click',function(){
     return false;//当然 也阻止了事件本身
 });

总之：

当需要停止冒泡行为时，可以使用：

function stopBubble(e) { 
    //如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ){ 
        e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 
    }else{ 
        window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡 
     }
 }

当需要阻止默认行为时，可以使用：

function stopDefault( e ) { 
    if ( e && e.preventDefault ){
         e.preventDefault(); //阻止默认浏览器动作(W3C) 
     }else {
        window.event.returnValue = false; //IE中阻止函数器默认动作的方式 
     }
    return false; 
 }