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

时间：2023-12-03 09:38:14
<!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>

需要  jquery.js 自己引入

相关文章