事件冒泡

什么是事件冒泡 
在一个对象上触发某类事件(比如单击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. LeetCode解题报告—— Jump Game & Merge Intervals & Permutation Sequence

    1. Jump Game Given an array of non-negative integers, you are initially positioned at the first inde ...

  2. Elements in iteration expect to have 'v-bind:key' directives.' 提示错误如何解决?

    在学习vue过程中遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误,查阅资料得知Vue 2.2.0+的版本里, ...

  3. virtualbox测试k8s要注意的情况

    想在virtualBox上测试k8s,遇到两个情况要注意.. 第一是flannel和dashborad起不起来,master都无法正常..这时可以想办法把Iptables,selinux,firewa ...

  4. hdu多校4

    Problem L. Graph Theory Homework 思路:很容易想到一步从 1 走到 n 最优. #include<bits/stdc++.h> #define LL lon ...

  5. 原生js遍历每一个对象,给每一个对象添加onclick事件

    <script type="text/javascript"> window.onload = function () { var imgs = document.im ...

  6. Crontab 在linux中的非常有用的Schedule Jobs

    crontab 是linux系统集成的定时任务命令,它对于系统运行(数据的备份,调度系统资源或命令,程序的定时触发等非常有用).crontab有些类似于Windows系统的Service的任务计划程序 ...

  7. HDU6058 Kanade's sum(思维 链表)

    Kanade's sum Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  8. B/S架构和C/S架构

    一.B/S架构 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件.这种模式统一了客户端,将系统功能实现的核心部分集 ...

  9. android 项目 功能 源码 eclipse的

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha eclipse的

  10. 【BZOJ 3166】【HEOI 2013】Alo

    http://www.lydsy.com/JudgeOnline/problem.php?id=3166 这道题难点在于求能对一个次大值有贡献的区间. 设这个次大值为\(a_i\),\(a_i\)左边 ...