jquery 事件冒泡解决 ie firefox 兼容性问题

最新推荐文章于 2024-10-02 05:39:15 发布

1361976860

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/5254711.html

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
#div1 {
    width: 400px;
    height: 400px;
    background-color: red;
}

#div2 {
    width: 300px;
    height: 300px;
    background-color: green;
}

#div3 {
    width: 200px;
    height: 200px;
    background-color: blue;
}
</style>
<script language='javascript' src='../jQuery/jquery.js'></script>
<script>
    $().ready(function() {
        
        //点击事件 div1
        $('#div1').bind('click', function() {
            alert('div1');
        });

        //点击事件 div2
        $("#div2").bind("click", function(event) {
            alert('div2');
            event.stopPropagation();
        });

        //点击事件 div3
        $("#div3").bind("click", function(event) {
            alert('div3');
            //弹出消息框后，取消事件冒泡
            event.stopPropagation();
        });
    });
</script>
</head>
<body>
    <div id='div1'>
        <div id='div2'>
            <div id='div3'></div>
        </div>
    </div>
</body>
</html>