收藏一个兼容多浏览器的阻止事件冒泡的函数】

JavaScript处理事件的一些兼容写法

博客分类：
• js

JavaScript Chrome C# C++ C

绑定事件 var addEvent = function( obj, type, fn ) {   if (obj.addEventListener)       obj.addEventListener( type, fn, false );   else if (obj.attachEvent) {       obj["e"+type+fn] = fn;       obj.attachEvent( "on"+type, function() {           obj["e"+type+fn]();       } );   } }; 另一个实现 var addEvent = (function () {   if (document.addEventListener) {       return function (el, type, fn) {           el.addEventListener(type, fn, false);       };   } else {       return function (el, type, fn) {           el.attachEvent('on' + type, function () {               return fn.call(el, window.event);           });       }   } })(); 绑定onpropertychange事件 onpropertychange是微软 制造的一个事件，它在一个元素的属性发生变化的时候触发，常见的有文本的长度改变，样长改变等，FF大致和它相似的属性为oninput事件，不过它只针对textfield与textarea的value属性。safari，firefox，chrome与 opera都支持此属性。 var addPropertyChangeEvent = function (obj,fn) {   if(window.ActiveXObject){       obj.onpropertychange = fn;   }else{       obj.addEventListener("input",fn,false);   } } 复制代码 移除事件 var removeEvent = function( obj, type, fn ) {   if (obj.removeEventListener)       obj.removeEventListener( type, fn, false );   else if (obj.detachEvent) {       obj.detachEvent( "on"+type, obj["e"+type+fn] );       obj["e"+type+fn] = null;   } }; 加载事件 var loadEvent = function(fn) {   var oldonload = window.onload;   if (typeof window.onload != 'function') {       window.onload = fn;   }else {       window.onload = function() {           oldonload();           fn();       }   } } 阻止事件 var stopEvent = function(e){     e = e || window.event;     if(e.preventDefault) {       e.preventDefault();       e.stopPropagation();     }else{       e.returnValue = false;       e.cancelBubble = true;     }   }, 如果仅仅是阻止事件冒泡 var stopPropagation = function(e) {    e = e || window.event;   if (!+"\v1") {      e.cancelBubble = true;         } else {      e.stopPropagation();   } } 取得事件源对象 相当于Prototype.js框架的Event.element(e) var getEvent = function(e){    e = e || window.event;   var target = event.srcElement ? event.srcElement : event.target;   return target } 或者这个功能更强大，我在开发datagrid时开发出来的，详细用法见《一步步教你实现表格排序（第二部分）》。 var getEvent = function(e) {  var e = e || window.event;  if (!e) {   var c = this.getEvent.caller;   while (c) {     e = c.arguments[0];     if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {       break;     }     c = c.caller;   }  }  var target = e.srcElement ? e.srcElement : e.target,  currentN = target.nodeName.toLowerCase(),  parentN  = target.parentNode.nodeName.toLowerCase(),  grandN = target.parentNode.parentNode.nodeName.toLowerCase();  return [e,target,currentN,parentN,grandN]; }

 

--------------------------------------------------------------------------------------------------

阻止冒泡事件的方法有两种，第一种是IE的方法，第二种是DOM方法，至于为什么要分为两种方法去讨论之，这里就不做讨论了，总之是浏览器一些蹩脚的问题，好了废话不说了，直接贴代码了
//阻止冒泡事件

1  function  stopBubble(e){
2    if (e && e.stopPropagation){ // 非IE
3    e.stopPropagation();
4   }
5    else { // IE
6    window.event.cancelBubble = true ;
7   }
8  } 

举个例子：就是谷歌首页的更多选项吧，不知道的可以去看看http://www.google.com/
这里要应用两个点击事件，一个是div.onclick，另一个就是document.onclick，那么问题就出现了，在调用div.onclick的时候，由于冒泡事件的存在，会自动的调用document.onclick，由于冒泡的顺序是从里向外的（div->body->document->html）所以div.onclick事件就会被覆盖掉，也就不会执行了，解决的方案其实也是很简单的哦，就是在执行div.onclick的时候阻止冒泡事件就好了，那怎么阻止呢，就调用上面的函数就ok了！哈哈！
ps：在介绍一下阻止浏览器默认行为的方法，大同小异，这里就不再赘述了

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

 

 

<div onclick="divClick(event)">点击我</div>
<script>
　　function divClick(e){
　　　　alert("点击了DIV");　　
 　　　　e=e|| window.event;
　　　　 stopBubble(e);
　　} 

　　document.body.onclick=function(){
　　　　　　alert("我是Body的Click事件");
　　}

　　function stopBubble(e) {
            //如果传入了事件对象.那么就是非IE浏览器
            if (e && e.stopPropagation) {
                //因此它支持W3C的stopPropation()方法
                e.stopPropagation();
            }
            else {
                //否则,我们得使用IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
        }
</script>

 stopBubble(e);加入这个是防止事件冒泡，执行body的click事件。要传个event过来

 

 

 

【收藏一个兼容多浏览器的阻止事件冒泡的函数】
function stopBubble(e){
    //如果传入了事件对象.那么就是非IE浏览器
    if(e && e.stopPropagation){
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else
    {
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}

 

 

Javascript中的冒泡阻止，jquery举例

通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; })

描述:

通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

描述:

通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});

----------------------------------------------------

     
       
 
        
 
         
就是说用Div框住flash  Div的鼠标事件不传递给Body

文中说的方法记录一下
 
           
 
             
             
            /**/ 
            /*---------------------------
    功能:停止事件冒泡
    ---------------------------*/ 
            
     
            function 
             stopBubble(e)  
             
            {
        //如果提供了事件对象，则这是一个非IE浏览器
        if ( e && e.stopPropagation )
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        else
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
    } 
            
     
            // 
            阻止浏览器的默认行为 
            
 
                 
            function 
             stopDefault( e )  
             
            {
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault )
            e.preventDefault();
        //IE中阻止函数器默认动作的方式
        else
            window.event.returnValue = false;
        return false;
    } 
            
 
           
使用方法 
           
 
             
            // 
            监视用户何时把鼠标移到元素上， 
            
 
                 
            // 
            为该元素添加红色边框 
            
 
                unionDom[i].onmouseover  
            = 
              
            function 
            (e)  
             
            {
        this.style.border = "1px solid red";
        stopBubble( e );
    } 
            ;
     
            // 
            监视用户何时把鼠标移出元素， 
            
 
                 
            // 
            删除我们所添加的红色边框 
            
 
                unionDom[i].onmouseout  
            = 
              
            function 
            (e)  
             
            {
        this.style.border = "0px";
        stopBubble( e );
    } 
            ; 
           uniconDom[i]是页面的一个html标记