如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题。

//HTML 页面

<div style="width:200px;height:200px;background:red;">
<input type="button" value="按钮" />
</div>
//三个不同元素触发事件
$('input').click(function () {
alert('按钮被触发了!');
}); $('div').click(function () {
alert('div 层被触发了!');
}); $(document).click(function () {
alert('文档页面被触发了!');
});

jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发
的事件上时,所有上层的冒泡行为都将被取消。

$('input').click(function (e) {
alert('按钮被触发了!');
e.stopPropagation();
});

jquery的冒泡和默认行为的更多相关文章

  1. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  2. jquery,禁止冒泡和默认行为

    如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题.//HTML 页面<div style="width:200px;height:200px;ba ...

  3. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  4. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  5. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

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

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

  8. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  9. jQuery 事件冒泡

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

随机推荐

  1. ajax 分页完全代码整理

    /* ajax分页 */ var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数 functi ...

  2. 【转载】MongoDB中的MapReduce 高级操作介绍

    转载自残缺的孤独 1.概述 MongoDB中的MapReduce相当于关系数据库中的group by.使用MapReduce要实现两个函数Map和Reduce函数.Map函数调用emit(key,va ...

  3. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  4. Django学习(二) Django框架简单搭建

    为了快速学习Python进行Web的开发,所以我不准备从Python的基础学起,直接从Django框架入手,边学框架边学Python的基础知识. 下面就开始Django的快速开发之旅吧. 关于Djan ...

  5. Entity Framewor中的 Migration

    http://www.entityframeworktutorial.net/code-first/code-based-migration-in-code-first.aspx = Code bas ...

  6. XML的DTD约束

    DTD约束:DTD的声明和引用 1.内部DTD文档 <!DOCTYPE 根元素 [定义内容]> 2.外部DTD文档 <!DOCTYPE 根元素 SYSTEM "DTD文件路 ...

  7. SARscape5.2哨兵1A数据的读取

    SARscape5.2支持哨兵1A数据的读取,支持的数据类型有: SM SLC ——条带模式的斜距单视复数产品 IW SLC——干涉宽幅模式(TOPS Mode)的斜距单视复数产品 EW SLC——超 ...

  8. 14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用

    14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用 LOCK TABLES 和UNLOCK TABLES 交互实用事务如 ...

  9. uva 10382 Watering Grass_贪心

    题意:给你个矩形n*m,再给你n个圆的圆心坐标和半径,问最用最少用几个圆把这个矩形覆盖 思路:直接想发现这问题不容易,后来发现可以把圆看做区间(能把矩形面积覆盖),然后这个问题就容易解决了 #incl ...

  10. js实现车轮的来回滚动

    最近喜欢用js做车轮的来回滚动,简单的js动画分享给大家.有什么建议记得说出来大家一起讨论哦!效果图如下: 源代码: <style> #pic1{ width:20px; height:2 ...