事件冒泡

什么是事件冒泡 
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的作用 
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡 
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation(); });
$(document).click(function(event) {
alert('grandfather');
});
}) ...... <div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>

阻止默认行为 
阻止右键菜单

$(document).contextmenu(function(event) {
event.preventDefault();
});

合并阻止操作 
实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用

// event.stopPropagation();
// event.preventDefault(); // 合并写法:
return false;

Jquery事件冒泡的更多相关文章

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

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

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

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

  3. jQuery 事件冒泡

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

  4. 阻止jQuery事件冒泡

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

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

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

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

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

  7. 事件冒泡及事件委托的理解(JQuery Dom操作)

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  8. jq 事件冒泡总结

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

  9. 什么是JS事件冒泡

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

随机推荐

  1. poj 2104(线段树)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 45653   Accepted: 15177 Ca ...

  2. php 正则验证字符串是否为数字

    PHP 正则验证字符串是否为数字 方法一: php中利用正则表达式验证字符串是否为数字一件非常容易的事情,最主要的是如何写好正则表达式以及掌握正则表达式的写法,在此利用正则表达式的方式来列举一下判断数 ...

  3. 转:json注入

    现在大部分web采用ajax通信,数据表现为json格式,因此可以尝试进行json注入. json注入:根据实际情况进行注入.有的时候,可能是为了方便,有人会手动拼接下JSON,但是这种随手代码,却可 ...

  4. 【SQL】ORACLE在sqlplus中使用spool方式生成建表语句

    在实际生产中有时我们需要将一张表的数据导入到另外一张表,如果有PLSQL,我们可以通过PLSQL工具将数据导出为sql脚本,然后再在另外一个数据库中执行这个脚本.但有时在实际生产中我们没有PLSQL这 ...

  5. python笔记三:函数式编程

    1.概念: 函数式编程就是一种抽象程度很http://i.cnblogs.com/EditPosts.aspx?opt=1高的编程范式,纯粹的函数式编程语言编写的函数没有变量,因此,任意一个函数,只要 ...

  6. 【Leetcode】264. Ugly Number II ,丑数

    原题 Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime facto ...

  7. 【C++】函数缺省参数的作用

    用法:void func(int param1, int param2 = 1, int param = 3) {} func(10); //等同于func(10, 1 , 3) func(10,8) ...

  8. JVM入门——JVM内存结构

    一.java代码编译执行过程 1.源码编译:通过Java源码编译器将Java代码编译成JVM字节码(.class文件) 2.类加载:通过ClassLoader及其子类来完成JVM的类加载 3.类执行: ...

  9. Java高级架构师(一)第31节:Nginx简介、安装和基本运行

    第一节:主要介绍Nginx和安装

  10. 星际争霸 虚空之遗 人族5BB 操作流程

    人族5BB rush timing 3min-3min30 一波战术,对面双开不侦察应该就GG了. 14农民BS,建议在第一个BS后的100矿,马上接上一个BS堵口,基本上对面是侦察不到的,特别是内双 ...