Jquery事件冒泡
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件(比如单击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事件冒泡的更多相关文章
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jquery 事件冒泡 解决 ie firefox 兼容性问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 事件冒泡
1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...
- 阻止jQuery事件冒泡
Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...
- Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件
$(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...
- jquery——事件冒泡、事件委托
一个事件冒泡的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 事件冒泡及事件委托的理解(JQuery Dom操作)
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jq 事件冒泡总结
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
随机推荐
- linux服务器上如何显示工作路径
1. 修改PS环境变量 [root@linux-node01 ~]# vi /etc/bashrc [ "$PS1" = "\\s-\\v\\\$ " ] &a ...
- Java学习笔记(九)——javabean
[前面的话] 实际项目在用spring框架结合dubbo框架做一个系统,虽然也负责了一块内容,但是自己的能力还是不足,所以还需要好好学习一下基础知识,然后做一些笔记.自己的自学能力还是显得不够好,每次 ...
- AC日记——[ZJOI2012]网络 bzoj 2816
2816 思路: 多个LCT: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 10005 #define l ...
- Ext 目录
adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库. build: 压缩后的ext全部源码(里面分类存放). docs: API帮助文档. exmaples ...
- sublime text光标移入移出括号的快捷键设置
使用sublime text每次输入完一个函数或者标签,光标一般都是停留在括号中间,要跳出来要使用左右方向键或者end键 这俩键键区比较远,按起来麻烦,可以自己设置快捷键实现跳出的功能. 原来的快捷键 ...
- Linux上安装MongoDB
使用本教程使用.rpm 软件包在红帽企业Linux或CentOS Linux版本6和7上安装MongoDB Community Edition . 平台支持 本安装指南仅支持64位系统.详细信息请参见 ...
- python版GetTickCount()
time.clock() return the current processor time as a floating point number expressed in seconds. 即返回一 ...
- PHP超全局变量数组
以下8个变量都是数组变量,又称为“预定义变量” 1.$_GET : 把数据通过地址栏传递到服务器,这是方式必须是$_GET方式传递: 2.$_POST : 通过表单发送的数据必须是POST方式: 3. ...
- Java基于数据源的数据库访问
☞ 概述 最早接触的Java访问数据库,是通过jdbc接口.后来工作之后,一般是在服务器(如weblogic)配置数据源,通过JNDI使用数据源:最近需要在程序中动态构造数据源,查了些资料,备录于此. ...
- Eclipse 主题(修改背景色)