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

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

博客分类：
• js

JavaScriptChromeC#C++C

绑定事件

1. var addEvent = function( obj, type, fn ) {
   
2.   if (obj.addEventListener)
   
3.       obj.addEventListener( type, fn, false );
   
4.   else if (obj.attachEvent) {
   
5.       obj["e"+type+fn] = fn;
   
6.       obj.attachEvent( "on"+type, function() {
   
7.           obj["e"+type+fn]();
   
8.       } );
   
9.   }
   
10. };

另一个实现

1. var addEvent = (function () {
   
2.   if (document.addEventListener) {
   
3.       return function (el, type, fn) {
   
4.           el.addEventListener(type, fn, false);
   
5.       };
   
6.   } else {
   
7.       return function (el, type, fn) {
   
8.           el.attachEvent('on' + type, function () {
   
9.               return fn.call(el, window.event);
   
10.           });
    
11.       }
    
12.   }
    
13. })();

绑定onpropertychange事件

onpropertychange是微软 制造的一个事件，它在一个元素的属性发生变化的时候触发，常见的有文本的长度改变，样长改变等，FF大致和它相似的属性为oninput事件，不过它只针对textfield与textarea的value属性。safari，firefox，chrome与 opera都支持此属性。

1. var addPropertyChangeEvent = function (obj,fn) {
   
2.   if(window.ActiveXObject){
   
3.       obj.onpropertychange = fn;
   
4.   }else{
   
5.       obj.addEventListener("input",fn,false);
   
6.   }
   
7. }

复制代码

移除事件

1. var removeEvent = function( obj, type, fn ) {
   
2.   if (obj.removeEventListener)
   
3.       obj.removeEventListener( type, fn, false );
   
4.   else if (obj.detachEvent) {
   
5.       obj.detachEvent( "on"+type, obj["e"+type+fn] );
   
6.       obj["e"+type+fn] = null;
   
7.   }
   
8. };

加载事件

1. var loadEvent = function(fn) {
   
2.   var oldonload = window.onload;
   
3.   if (typeof window.onload != 'function') {
   
4.       window.onload = fn;
   
5.   }else {
   
6.       window.onload = function() {
   
7.           oldonload();
   
8.           fn();
   
9.       }
   
10.   }
    
11. }

阻止事件

1. var stopEvent = function(e){
   
2.     e = e || window.event;
   
3.     if(e.preventDefault) {
   
4.       e.preventDefault();
   
5.       e.stopPropagation();
   
6.     }else{
   
7.       e.returnValue = false;
   
8.       e.cancelBubble = true;
   
9.     }
   
10.   },

如果仅仅是阻止事件冒泡

1. var stopPropagation = function(e) {
   
2.    e = e || window.event;
   
3.   if (!+"\v1") {
   
4.      e.cancelBubble = true;      
   
5.   } else {
   
6.      e.stopPropagation();
   
7.   }
   
8. }

取得事件源对象

相当于Prototype.js框架的Event.element(e)

1. var getEvent = function(e){
   
2.    e = e || window.event;
   
3.   var target = event.srcElement ? event.srcElement : event.target;
   
4.   return target
   
5. }

或者这个功能更强大，我在开发datagrid时开发出来的，详细用法见《一步步教你实现表格排序（第二部分）》。

1. var getEvent = function(e) {
   
2.  var e = e || window.event;
   
3.  if (!e) {
   
4.   var c = this.getEvent.caller;
   
5.   while (c) {
   
6.     e = c.arguments[0];
   
7.     if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {
   
8.       break;
   
9.     }
   
10.     c = c.caller;
    
11.   }
    
12.  }
    
13.  var target = e.srcElement ? e.srcElement : e.target,
    
14.  currentN = target.nodeName.toLowerCase(),
    
15.  parentN  = target.parentNode.nodeName.toLowerCase(),
    
16.  grandN = target.parentNode.parentNode.nodeName.toLowerCase();
    
17.  return [e,target,currentN,parentN,grandN];
    
18. }

 

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

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

 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：在介绍一下阻止浏览器默认行为的方法，大同小异，这里就不再赘述了

 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举例

查看全文