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

//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. Java枚举类enum

    枚举类enum是JDK1.5引入的,之前都是用public static final int enum_value来代替枚举类的.枚举类enum是一种特殊的类,它默认继承了类java.lang.Enu ...

  2. AngularJS中如何使用trigger报错$digest already in progress

    今天在使用trigger事件碰到问题: 例如我有两个按钮,button1和button2,在button2绑定了ng-click事件,现在想点击button1从而触发button2的ng-click事 ...

  3. input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  4. MSSQL 导入导出文本文件

    exec master..xp_cmdshell'net use \\192.168.1.8\testfolder "0123" /user:192.168.1.8\wjp' EX ...

  5. Linux内核目录解析~

    以前进过一些公司看到一些服务器,把环境搭建都搭建在etc里面,而且都乱套了.在找PHP配置文件和apache的conf文件都难找到, 我们应该大致的了解下linux的文件分布 /etc : 放置系统重 ...

  6. php的多线程使用

    PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间. 在liunx下的安装 准备工作: 1.下载Threa ...

  7. 变形课--hdu1181

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  8. 局域网内IP冲突怎么办

      对于在Internet和Intranet网络上,使用TCP/IP协议时每台主机必须具有独立的IP地址,有了IP地址的主机才能与网络上的其它主机进行通讯.但IP地址冲突会造成网络客户不能正常工作,只 ...

  9. 把自定义控件集成到Qt Designer中

    要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...

  10. Matlab与.NET混编解决人脸识别问题

    原文 http://www.cnblogs.com/asxinyu/archive/2013/05/29/3107013.html 如果这些文章对你有用,有帮助,期待更多开源组件介绍,请不要吝啬手中的 ...