阻止冒泡与阻止默认行为

<div id="aaa" style="width:500px;height:300px;background: red;text-align: center;">

    <div id="bbb" style="width:300px;height:200px;background: pink;">
         <div id="ccc" style="width:200px;height:100px;background: green;"></div>
    </div>
</div>

<a href="http://www.baidu.com" id="link"> 百度一下</a>

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var link=$("link");

var btn=$("btn");
var divs=document.getElementsByTagName("div");

//(1).阻止冒泡
function bindEvent(obj,type,fun){ //经典封装事件
    if(obj.addEventListener){//判断是否标准浏览器DOM2级事件模型
        obj.addEventListener(type,fun,false);                                        //注:false为冒泡→从里面到外面,true为捕获→从外面到里面
    }
    else if(obj.attachEvent){//判断是否IE浏览器DOM2级事件模型
        obj.attachEvent("on"+type,fun);
    }
    else{                          //DOM0级事件模型
        obj["on"+type]=fun;
    }
}
function stopBubble(ev){   //阻止冒泡;
    var e=event||ev;  //浏览器兼容
    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        e.cancelBubble=true;
    }
}
for(var i=0;i<divs.length;i++){ 
    bindEvent(divs[i],"click",function(ev){
        alert(this.id);
        stopBubble(ev); //调用
    })
}

//(2) 阻止默认事件

function prevent(ev){ //阻止默认事件;
    var e=event||ev;
    if(e.preventDefault){
        e.preventDefault();
    }
    else{
        window.event.returnValue=false;
    }
}

link.onclick=function(ev){ //调用
    prevent(ev);
}

</script>

时间: 2024-10-12 07:44:42

阻止冒泡与阻止默认行为的相关文章

jQuery阻止冒泡和HTML默认操作

jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 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() {

js中阻止冒泡与浏览器默认行为

阻止冒泡: 1 function stopPro(e){ 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.stopPropagation ) 4 //因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6 else 7 //否则,我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 } 阻止浏览器默认行为 1 functon preDefault(

阻止冒泡和阻止默认事件——cancelBubble和stopPropagation

http://stackoverflow.com/questions/7596364/whats-the-difference-between-cancelbubble-and-stoppropagation 结论: cancelBubble是IE8及以下的浏览器阻止冒泡的一个布尔值类型的属性(非方法), stopPropagation()是其他标准浏览器和IE9及以上版本IE浏览器的阻止冒泡的一个方法 cancelBubble非标准,逐渐会被淘汰,所以提倡使用stopPropagation()

js 阻止冒泡事件和默认事件

阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); } 阻止默认事件 window.event? window.event.returnValue=false : e

JS阻止冒泡事件以及默认事件发生的简单方法

如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 代码如下: function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true;

jquery阻止冒泡和阻止默认事件

event.stopPropagation(); event.preventDefault(); http://www.cnblogs.com/qixuejia/archive/2013/10/10/3362318.html

JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开. 二.event.preventDefault() 阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 三.return false: 这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件:写上此代码,连接不会被

js阻止冒泡及jquery阻止事件冒泡示例介绍

js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev