码迷,mamicode.com
首页 > Web开发 > 详细

js冒泡事件示例

时间:2014-08-04 17:28:57      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   art   cti   

<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", width: "500px" }); 
            $("#div2").css({ height: "300px", width: "300px" }); 
            $("#div3").css({ height: "100px", width: "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才正常!

js冒泡事件示例,布布扣,bubuko.com

js冒泡事件示例

标签:style   blog   http   color   java   io   art   cti   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!