冒泡事件小实例

来源：互联网发布：办公软件是什么编辑：程序博客网时间：2024/04/30 23:55

冒泡事件小实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div</title>
<script language="javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
    $('#d1').click(function(){
        alert('你点击了大DIV');
    });
    $('#d2').click(function(e){
        alert('你点击了小DIV');
        if (e && e.stopPropagation){    //如果提供了事件对象，则这是一个非IE浏览器
            e.stopPropagation();        //因此它支持W3C的stopPropagation()方法
        }else{
            window.event.cancelBubble = true;    //否则，我们需要使用IE的方式来取消事件冒泡
        }
    });
});

</script>
</head>
<body>
<div id="d1" style="height:200px;width:300px;background-color:#ccc;margin:auto 0;">
    <div id="d2" style="height:50px;width:50px;background-color:#ddd;padding:10;">
        小DIV
    </div>
    大的DIV
</div>
</body>
</html>