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

<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裸机教程-GPIOTE

    GPIO通常都会具有中断功能,上一讲的GPIO中并没有涉及到中断的相关寄存器. 51822将GPIO的中断相关做成了一个单独的模块GPIOTE,这个模块不仅提供了GPIO的中断功能,同时提供了 通过t ...

  2. 关于<a href='javascript:function()'>

    <a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码.和onclick能起到同样的效果,一般来说,如果要调用脚本还是 ...

  3. awk统计nginx日志访问前一百的ip

    访问ip  awk '{print $1}' access.log| sort | uniq -c | sort -n -k 1 -r | head -n 100 访问地址 awk '{print $ ...

  4. zepto源码--fragment--学习笔记

    文档片段fragment函数默认传递三个参数: html文档片段字符串 name标签 properties额外添加的属性 函数内部实现过程: var dom, nodes, container; 中间 ...

  5. IOS的APNS和PushKit门道详述

    基本功 iOS在诞生之初为了最大程度的保证用户体验,做了一些高瞻远瞩且影响深远的设计.APNs(Apple Push Notification service)就是其中一项. 早期iOS设备的内存和C ...

  6. 远程通知APNs（Apple Push Notification Server）

    推送通知是由应用服务提供商发起的,通过苹果的APNs(Apple Push Notification Server)发送到应用客户端.下面是苹果官方关于推送通知的过程示意图: 推送通知的过程可以分为以 ...

  7. 20145211 《Java程序设计》第10周学习总结——昨夜星辰昨夜风

    教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. 在发送和接收 ...

  8. 转：【工欲善其事必先利其器】—Entity Framework实例详解

    开始本篇文章之前,先说一下Entity Framework 6 Alpha1在NuGet中已可用,原文链接http://blogs.msdn.com/b/adonet/archive/2012/10/ ...

  9. 实战案例：DIV嵌套

    缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应 ...

  10. sql server 2008语句中的go有什么用？

    GO表示一个批处理的结束, SQLSERVER遇到Go以后就会将GO之前的语句作为一整批进行处理你在SSMS里执行的时候, 通常加不加都可以,但是如果实在SQLCMD下执行, GO就是一个执行命令了另 ...