一：事件冒泡的意思是：一个大的容器已经设置了事件，如果这个容器里还包容着一个小的容器也设置了自己的事件，那么因为小容器是在大容器里面的，触发小容器的事件同时也等于触发了大容器的事件，有时这并不是我们想要的结果，我们可以通过能力检测来阻止事件冒泡如：

<script type="text/javascript">
        $(function () {
            $('#da').css('width', '700px').css('height', '300px').css('border', '1px solid Red');
            $('dl').css('width', '500px').css('height', '210px').css('border', '1px solid blue');
            $('dt').addClass('words').click(function () {
                $('dd strong').css('color', '#FF0099');
            });
            $('dd').css('width', '330px').css('height', '210px').css('border', '1px solid green').css('float', 'left').css('margin', '0px auto');
            $('#xiao').css('width', '270px').css('height', '35px');
            $('#xiao>img').css('float', 'right');
            $('dd .daoyan').click(function () {
                $('span').css('font-weight', 'bolder');
            })
            $('dd>#biaoqian').click(function () {
                $('dd .su').css('backgroundColor', '#E0F8EA');
            })
            $('img[alt=收藏本片]').click(function (event) {
                alert('您已收藏成功！');
                event = event || window.event;
                if (event.stopPropagation) {
                    //IE浏览器管用
                    event.stopPropagation();
                } else {
                   event.cancelBubble = true;
                }
            })
        })
    </script>
    <style type="text/css">
       .words
       {
           width:151px;
           height:210px;
           border:1px solid yellow;
           float:left;
           }
    </style>
</head>
<body>
  <div id='da'>
     <dl>
        <dt><img src="img/pic.gif" alt="非缘勿扰"/><img src="img/col.gif" alt="收藏本片"/></dt>
        <dd><strong>非缘勿扰（共36集）<br/>主演：</strong>苏有朋/秦岚/傅艺伟等<br/><strong class="daoyan">导演：</strong><span>赖水清</span><br /><strong id="biaoqian">标签：</strong><span class="su">苏有朋</span>&nbsp;国产电视剧&nbsp;<span class="su">2013</span>&nbsp;连续剧<br /><strong>剧情：</strong>当代都市，大龄女刘琳、杨阳都在寻找着自己的如意郎君。刘琳偶遇陆氏房产总裁陆西诺，两人成了欢喜冤家，遇到暗恋陆西诺的丁娟的记恨...<a href="#">点击了解更多</a></dd>
     </dl>
     <div id="xiao"><img src="img/btn.gif" alt="点击播放"/></div>
  </div>
</body>

其中<dt><img src="img/pic.gif" alt="非缘勿扰"/><img src="img/col.gif" alt="收藏本片"/></dt>
我的dt标签里放了两张图，我设置了dt的点击事件：
 $('dt').addClass('words').click(function () {
                $('dd strong').css('color', '#FF0099');
            });

那么我的第二张图片点击事件会同时触发两个事件，因为都同在dt标签里
            $('img[alt=收藏本片]').click(function (event) {
                alert('您已收藏成功！');
            })

此时我可以用能力检测的方法判断浏览器的解析能力，根据不同浏览器选用不同方法：
            $('img[alt=收藏本片]').click(function (event) {
                alert('您已收藏成功！');
               //取消事件冒泡，要进行能力检测，也就是分IE和非IE两种情况
                //01.第一道能力检测，event对象在IE下写法是window.event，而在
                //非IE下直接用event;
                event = event || window.event;
                //第二道能力检测
                if (event.stopPropagation) {
                    //IE浏览器管用
                    event.stopPropagation();
                } else {
                   event.cancelBubble = true;
                }
            })

二：取消后续执行内容如例所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //点击a标签，不进行页面跳转
        window.onload = function () {
            var obj = document.getElementById("myhref");
            obj.onclick = function (event) {
                //取消默认行为
                //return false;
                //分浏览器
                //IE下
                //01.第一道能力检测
                event = event || window.event;
                if (event.preventDefault) {

//非IE下
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }              
            };
        }
    </script>
</head>
<body>
  <a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>

这里的a标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。

jQuery中处理事件冒泡的方法和取消后续内容的方法的更多相关文章

  1. JQuery中事件冒泡

    JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...

  2. JQuery中两个ul标签的li互相移动实现方法

    这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...

  3. 恶补jquery(四)jquery中事件--冒泡

    事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...

  4. jQuery中事件冒泡问题及处理

    在为一个元素添加事件时,经常会出现的一个问题就是事件冒泡.例如在div中嵌套了一个span元素,为div和span都添加了事件点击,如果点击span会导致span和div元素相继触发监听事件.顺序是从 ...

  5. jquery中防止冒泡事件

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  6. jquery中Uncaught TypeError: $(...).ajaxUpload is not a function(…)错误解决方法

    错误原因:该函数不是jquery的核心函数,所以需要外部引入ajaxfileupload.js文件,可能是没有引入,或者引入的js文件互相冲突 解决方法:每次进入一个函数之前打印该函数所有的js文件, ...

  7. jquery中ajax序列化提交form表单的几种方法。

    一,ajax主流的方法 $.ajax({ type: 'post', url: 'your url', data: $("form").serialize(), success: ...

  8. jQuery中hover和blur使用代理delegate无效的解决方法

    今天就遇到了这样的小问题: $(document).ready(function(){ $('.status_on').hover(function(){ $(this).html('点击禁用'); ...

  9. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

随机推荐

  1. nrf51822-广播模式

    解决以下几个问题: 1 SDK9 中的几种广播模型 2 广播超时如何进入睡眠 3 如何取消广播超时睡眠使其可以无限广播. 1 SDK9 中的几种广播模型 Nordci SDK对于广播方面有一个模块.这 ...

  2. linux shell send and receive emails

    http://www.netcan666.com/2016/02/20/%E5%88%A9%E7%94%A8telnet%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5% ...

  3. 【Android测试】【第七节】Monkey——源码浅谈

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4713466.html 前言 根据上一篇我们学会了Monke ...

  4. LightOj1285 - Drawing Simple Polygon（连接多边形各点）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1285 题意:给你一些点,然后把它们用一条线把它们连起来,构成一个多边形,不能有相交,必 ...

  5. less 命令（转）

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  6. python深复制和浅复制

    深复制:一个更改后不会影响到其他的变量,另一个变量B赋值给变量A时,虽然A和B的内存空间仍然相同,但当A的值发生变化时,会重新给A分配空间,A和B的地址变得不再相同 浅复制:改变一个就会引起另一个的改 ...

  7. angularjs 获取地址传参

    .controller('CityCtrl', function ($scope, $location,$ionicModal) { 注入location服务 $scope.name = $locat ...

  8. 阻止PHP彩蛋信息泄漏 [转]

    Easter Eggs(复活节彩蛋)外行人估计不了解这是神木玩意,彩蛋的网络解释是:用于电脑.电子游戏.电脑游戏.影碟或其他互动多媒体之中的隐藏功能或信息.PHP包含一个安全漏洞,可能导致未经授权的信 ...

  9. SocketServer model_use

    #!/usr/bin/env python #-*- coding:utf- -*- import SocketServer class MySocker(SocketServer.BaseReque ...

  10. HQL的语言

    HQL: 是Hibernate Query Language的缩写 1.HQL查询 特点: 与SQL相似,SQL中的语法基本上都可以直接使用 SQL查询的是表和表中的列而HQL查询的是对象或者对象中的 ...