冒泡事件小实例

最新推荐文章于 2024-11-13 01:18:00 发布

zf213

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量332

点赞数

分类专栏： jQuery 文章标签： javascript function xhtml div 浏览器 ie

本文链接：https://blog.csdn.net/zf213/article/details/4258379

版权

jQuery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

冒泡事件小实例

<!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>