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

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方法，至于为什么要分为两种方法去讨论之，这里就不做讨论了，总之是浏览器一些蹩脚的问题，好了废话不说了，直接贴代码了
//阻止冒泡事件
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标记
posted @ 2011-11-14 13:31  火腿骑士  阅读(232)  评论(0)  编辑  收藏  举报