Query对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();

  1. $("p").click(function(event){
  2. event.stopPropagation(); // do something
  3. })

但是这个方法对使用live 绑 定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;

  1. $("p").live("click", function(){
  2. $(this).after("Another paragraph!");
  3. return false;
  4. });

另外 JavaScript 阻止冒泡

 阻止冒泡事件的方法有两种,第一种是IE的方法,第二种是DOM方法,至于为什么要分为两种方法去讨论之,这里就不做讨论了,总之是浏览器一些蹩 脚的问题,好了废话不说了,直接贴代码了:

  1. //阻止冒泡事件
  2. function stopBubble(e) {
  3. if (e && e.stopPropagation) {//非IE
  4. e.stopPropagation();
  5. }
  6. else {//IE
  7. window.event.cancelBubble = true;
  8. }
  9. }

举个例子:就是谷歌首页的更多选项吧,不知道的可以去看看http://www.google.com/ 。
这里要应用两个点击事件,一个是div.onclick,另一个就是document.onclick,那么问题就出现了,在调用 div.onclick的时候,由于冒泡事件的存在,会自动的调用document.onclick,由于冒泡的顺序是从里向外的

(div->body->document->html)所以div.onclick事件就会被覆盖掉,也就不会执行了,解决的方案其 实也是很简单的哦,就是在执行div.onclick的时候阻止冒泡事件就好了,那怎么阻止呢,就调用上面的函数就ok了!哈哈! 
ps:在介绍 一下阻止浏览器默认行为的方法,大同小异,这里就不再赘述了。

  1. function stopDefault(e) {
  2. //阻止默认浏览器动作(W3C)
  3. if (e && e.preventDefault)
  4. e.preventDefault();
  5. //IE中阻止函数器默认动作的方式
  6. else
  7. window.event.returnValue = false;
  8. return false;
  9. }
 

阻止jQuery事件冒泡的更多相关文章

  1. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  2. 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  3. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  4. Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件

    $(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...

  5. jQuery 事件冒泡

    1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...

  6. jquery 事件冒泡 解决 ie firefox 兼容性问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

  8. Jquery事件冒泡

    事件冒泡 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...

  9. jquery——事件冒泡、事件委托

    一个事件冒泡的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. php文件上传错误信息

    错误信息说明 UPLOAD_ERR_OK:其值为0,没有错误发生,文件上传成功 UPLOAD_ERR_INI_SIZE:其值为1,上传的文件超过了php.ini和upload_max_filesize ...

  2. Maximum Subarray——经典

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. Mysql 中的Text字段的范围

    mysql中text 最大长度为65,535(2的16次方–1)字符的TEXT列.如果你觉得text长度不够,可以选择 MEDIUMTEXT最大长度为16,777,215. LONGTEXT最大长度为 ...

  4. Intellij IDEA 去掉Mapper文件中的背景

    1.在setting中输入:inspection --> SQL 2.去掉背景颜色,Apply即可

  5. UVA 548.Tree-fgets()函数读入字符串+二叉树(中序+后序遍历还原二叉树)+DFS or BFS(二叉树路径最小值并且相同路径值叶子节点权值最小)

    Tree UVA - 548 题意就是多次读入两个序列,第一个是中序遍历的,第二个是后序遍历的.还原二叉树,然后从根节点走到叶子节点,找路径权值和最小的,如果有相同权值的就找叶子节点权值最小的. 最后 ...

  6. Knockout.js(三):计算属性(Computed Observable)

    在Knockout2.0之前,计算属性被称之为依赖属性,在2.0版本中,ko.dependentObservable重命名为ko.computed,因为它在读.解释和类型上更简单.在实际使用中,ko. ...

  7. js实现table导出为Excel文件

    1.首先创建好表格. 2.然后在js中写三个方法 1)判断浏览器 2)定义文档类型 template : 定义文档的类型,相当于html页面中顶部的<!DOCTYPE> 声明.(个人理解, ...

  8. android 线程间通信

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,共享内存 变量 2,文件,数据库 3,处理器 消息机制 4, 线程 的 等待,通知 ...

  9. CodeForces - 875D High Cry

    题面在这里! 直接考虑每个位置成为最右边的最大值的位置,统计不合法区间,补集转化一下就好啦. 复杂度O(N * 30) #include<bits/stdc++.h> #define ll ...

  10. 抽象类(abstract class)和接口(interface)的异同

    抽象类和接口都不能够实例化,但可以定义抽象类和接口类型的引用.一个类如果继承了某个抽象类或者实现了某个接口都需要对其中的抽象方法全部进行实现,否则该类仍然需要被声明为抽象类. 接口比抽象类更加抽象,因 ...