<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冒泡事件示例的更多相关文章

  1. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  2. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  3. JS冒泡事件 与 事件捕获

    JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...

  4. Js冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  5. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  6. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  7. js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()

    一.问题 题目及答案展示:要求,点击题目,展开答案.如下: 展开前 展开后 最开始使用的toggle方法来实现 $(".content_problem").toggle( func ...

  8. JS冒泡事件与处理

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...

  9. js冒泡事件小解

    何为冒泡事件?简单来说事件就像一个水里的泡泡,先触发当前对象再触发其父元素,然后是父元素的父元素... eg: <div class="out" onclick= " ...

随机推荐

  1. 在线API，桌面版，jquery，css,Android中文开发文档,JScript,SQL掌用实例

    学习帮助文档大全 jquery,css,Android中文开发文档,JScript,SQL掌用实例 http://api.jq-school.com/

  2. UVa 673 (括号配对) Parentheses Balance

    本来是当做水题来做的,后来发现这道题略坑. 首先输入的字符串可能是空串,所以我用了gets函数,紧接着就被scanf("%d", &n)后面的换行符坑掉了. 于是乎再加一句 ...

  3. jquery Ajax应用总结

    常见应用: 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET&quo ...

  4. 【转】iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) -- 不错不错

    原文网址:http://blog.csdn.net/totogo2010/article/details/8615940 1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手 ...

  5. MVC三个IOC注入点之Ninject使用示例

    群里一个技术大牛说MVC有三个注入点,但我只会一个DefaultControllerFactory. 在群友的帮助下,我大致了解了下: IControllerFactory=>IDependen ...

  6. (八)学习MVC之三级联动

    1.新建项目,MVC选择基本模板 2.新建类:Model/Student.cs,数据库信息有三个实体:分别是年级.班级和学生. using System; using System.Collectio ...

  7. 使用SQL Server 2005作业设置定时任务

    公司有一个老项目由于直接把终端拍摄的图片以二进制的形式保存到数据库中,数据库比较大所以需要经常删除这些冗余数据,手动删除费时费力,项目组长让我把这些操作变成自动的,每天执行一次,只保留最近两个月的图片 ...

  8. postInvalidate、removeAllViewsInLayout、refreshDrawableState用法

    postInvalidate.invalidate:会调用控件的onDraw()重绘控件 refreshDrawableState:当控件在使用一个对控件状态敏感的Drawable对象时使用,如一个B ...

  9. POJ 3140-Contestants Division（树形dp）

    题意: n给节点的树,分成两个联通分支,使它们大小的绝对值最小,求这个最小值. 分析: 分成两个联通分支,即删除一条边,开始看到m(边数)和n(点数)没什么关系,但题目说的是一棵树,则m==n-1,求 ...

  10. POJ3241 Object Clustering 曼哈顿最小生成树

    题意:转换一下就是求曼哈顿最小生成树的第n-k条边 参考:莫涛大神的论文<平面点曼哈顿最小生成树> /* Problem: 3241 User: 96655 Memory: 920K Ti ...