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

//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. (转)MVC语法-@helpers和@functions(Razor内定义函数)

    (转)MVC语法-@helpers和@functions(Razor内定义函数) 转自:http://www.mikesdotnetting.com/Article/173/The-Differenc ...

  2. C# Cache何时使用及使用方法

    Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢?是不是在任何情况下用cache都能提高性能?是不是cache用的越多就越好呢?我在近 期开发的项目中有所体会,写下来当作总结也希 ...

  3. JavaScript 原型链的一点想法

    JavaScript借鉴了许多语言的特点:例如语法类Java.函数借鉴Scheme.原型继承借鉴自Self.正则表达式借鉴于Perl.(DC Javascript:语言精粹).      首先,每个J ...

  4. UVa 11488 - Hyper Prefix Sets

    找 前缀长度*符合该前缀的字符串数 的最大值 顺便练了一下字典树的模板 #include <iostream> #include <cstdio> #include <c ...

  5. E - The King

    Description Once upon a time in a country far away lived a king and he had a big kingdom. He was a v ...

  6. Berkeley DB基础教程

    一.Berkeley DB的介绍 (1)Berkeley DB是一个嵌入式数据库,它适合于管理海量的.简单的数据.如Google使用其来保存账户信息,Heritrix用其来保存froniter. (2 ...

  7. HTML5 canvas 在线画笔绘图工具(三)

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  8. [Head First Python]1. 初始python-人人都爱列表

    movies = [ "hello", "world",["xin","lover",["Jerry" ...

  9. tcl/tk demo

    环境及版本说明: OSX10.9 tclsh -> tclsh8.5 wish -> wish8.5 查看本机运行环境: which wish; 2 /usr/bin/wish which ...

  10. Ecsotre 参考

    2.dbschema dbschema 字段属性 ‘type’ => ‘int unsigned’, //字段类型 ‘extra’ => ‘auto_increment’,//定义自增 ‘ ...