js冒泡事件示例

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>jQuery - Start Animation</title> 
    <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
        $(function () { 
            $("div").css({ border: "1px solid red" }); 
            $("#div1").css({ height: "500px",  "500px" }); 
            $("#div2").css({ height: "300px",  "300px" }); 
            $("#div3").css({ height: "100px",  "100px" }); 
            
        }); 
   </script> 
</head> 
<body> 
    <div id="div1"> 
        <a href="#" onclick="click_one(event);">测试冒泡</a>
        <div id="div2" onclick="click_two(event);"> 
            <div id="div3" onclick="click_thi(event);"> 
            </div> 
        </div> 
    </div> 
</body> 
<script type="text/javascript">
    function click_one(event) {
        event.stopPropagation();
        alert("div1");
    }

    function click_two(event) {
        event.stopPropagation();
        alert("div2");
    }

    function click_thi(event) {
        event.stopPropagation();
        alert("div3");
    }
</script>
</html>

注意:

1. 火狐浏览器必须传递event参数

2. a标签的<href="javascript:click_one(event);">写法不能传递event对象,只有onclick才正常!

原文地址:https://www.cnblogs.com/cczhoufeng/p/3890394.html