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

雨点打透心脏的1/2处 2022-05-30 06:13 250阅读 0赞

### 一、冒泡事件 ###

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

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

也可以是

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

### 默认事件： ###

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

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的方式来取消事件冒泡 
         }
     }

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

[Link 1]: http://blog.csdn.net/lhjuejiang/article/details/79453407