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

//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. JSON 日期格式带 T 问题

    var iso = new IsoDateTimeConverter(); iso.DateTimeFormat = "yyyy-MM-dd"; object obj = new  ...

  2. 天坑 之 JSP编译错误

    情况:今天写自己的小网站,使用jsp+servlet+mysql,bean,dbutil,DAO等都已经写完,mySQL也已经创建好数据库,表,和字段,添加完成数据,启动tomcat,结果出现下图错误 ...

  3. W - Bitset(第二季水)

    Description Give you a number on base ten,you should output it on base two.(0 < n < 1000)      ...

  4. node.js入门(三)调式

    1.安装调式工具 打开命令行工具,输入以下内容,然后回车. npm install -g node-inspector 等待安装成功呢后,我们就可以使用 node-debug 文件名 这个命令来调式我 ...

  5. go import

    import "fmt"最常用的一种形式 import "./test"导入同一目录下test包中的内容 import f "fmt"导入f ...

  6. 配置nginx静态资源路径

    1.修改nginx.conf文件 server节点下location节点的 root目录修改 location / { root html; index index.html index.htm; } ...

  7. c语言 列出系统进程

    #include <stdio.h> #include "stdafx.h" #include <Windows.h> #include <strin ...

  8. Ubuntu安装与初始配置

    转载请注明作者:梦里风林 更多文章查看我的个人站: ahangchen.site 适用于Ubuntu版本 14.04/16.04LTS 64位 先上图 双系统安装 划分空闲磁盘,U盘安装ubuntu ...

  9. javascript链式调用实现方式总结

    方法链一般适合对一个对象进行连续操作(集中在一句代码).一定程度上可以减少代码量,缺点是它占用了函数的返回值. 一.方法体内返回对象实例自身(this) function ClassA(){ this ...

  10. WorkFlow4.0--入门到精通系列-专题索引

    原文地址:http://www.cnblogs.com/hegezhou_hot/archive/2011/06/15/2081405.html 开篇 首先.非常感谢大家的支持和厚爱,才有了这个系列, ...