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

<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. Python中Unicode字符串

    Python中Unicode字符串 字符串还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte ...

  2. SVN提交注意点

    一．提交之前先更新 1.         SVN更新的原则是要随时更新,随时提交.当完成了一个小功能,能够通过编译并且自己测试之后,谨慎地提交. 2.         如果在修改的期间别人也更改了sv ...

  3. Linq中常用的方法

    这几天闲着也是闲着,就仔细的研究了一下Linq的语法,还有他的一些扩展方法的使用. 下面是一些常用的扩展方法. Aggregate 自定义的聚合计算 All 检测序列中所有元素是否都满足指定的条件 A ...

  4. zepto源码--插入节点--学习笔记

    与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insert ...

  5. php--yii2框架错误提示

    if($code!=200){ $user=new UserAuth(); $user->mobile=$register['mobile']; $user->password=md5($ ...

  6. appium关于定位元素

    Windows上定位元素我用的是uiautomatorviewer 这个工具在你的SDK-tools目录下,点击uiautomatorviewer.bat启动,注意appium在跑的时候是取不到的 工 ...

  7. Group GridView：用于.Net的分组显示的GridView

    我的项目需要一个可以分组显示的GridView,我不会写,上网找了一圈,最终在国外的网站上找到的这个,比较符合我的要求,但它的分页得重写,它写了能分页,但我发现它的分页功能事实上并没有实现,也不知道是 ...

  8. MFC之常用控件（四）

    常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控件.列表控件.树形控件和进度条控件等等.本节教程先来讲解静态文本框的使用. 控件的通知消息 在将静态文本框的使用之 ...

  9. @SuppressWarnings

    http://www.cnblogs.com/fsjohnhuang/p/4040785.html 一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“ ...

  10. ajax 调用asp.net后台方法

    ajax 调用asp.net后台方法  这种做法有好几种,如调用xx.asxh 页面,或者直接调用xx.aspx也面,在page_Load中进行一些判断然后调用后面的其他方法, 或者你可以直接调用we ...