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

<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. cookie函数

    function getcookie(){ var cookie={}; var all=document.cookie; if(all===""){ alert(2); retu ...

  2. 查看linux库文件32位还是64位

    查看linux库文件32位还是64位 分类: linux2014-09-25 09:46 238人阅读 评论(0) 收藏 举报 objdump -a  *.a objdump -a  *.so

  3. BLE-NRF51822教程16-BLE地址

    本教程基于 sdk9+sd8.0 51822的 BLE的设备地址 可以通过如下函数函数来获得 地址的设置可以调用如下函数设置. 官方的demo工程中,都是没有主动调用过 sd_ble_gap_addr ...

  4. WCF 无法激活服务，因为它不支持 ASP.NET 兼容性。已为此应用程序启用了 ASP.NET 兼容性

    无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式,或将 AspNetCompatibil ...

  5. Ajax返回中文乱码问题（未解决）

    (未解决) 暂时使用办法:改用返回Map<String,String>形式的返回值,在ajax中获取json形式的数据.

  6. 20145211 《Java程序设计》实验报告一：Java开发环境的熟悉（Windows+IDEA）

    实验要求 使用JDK编译.运行简单的Java程序: 使用IDEA 编辑.编译.运行.调试Java程序. 实验内容 命令行下Java程序开发 IDEA下Java程序开发.调试 练习(通过命令行和IDEA ...

  7. LeetCode Basic Calculator

    原题链接在这里:https://leetcode.com/problems/basic-calculator/ Implement a basic calculator to evaluate a s ...

  8. Hlsl2glsl

    https://sourceforge.net/projects/hlsl2glsl/

  9. POJ1528问题解答

    #include <iostream>#include <cstdio>#include <cmath> #include <string>#inclu ...

  10. Linux就这个范儿 第14章 身在江湖

    Linux就这个范儿 第14章 身在江湖 “有人的地方就有江湖”,如今的计算机世界就像一个“江湖”.且不说冠希哥有多么无奈,把微博当QQ的局长有多么失败,就说如此平凡的你我什么时候就成了任人摆布的羔羊 ...