如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题。
//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('文档页面被触发了!');
});
注意:当我们点击文档的时候,只触发文档事件;当我们点击 div 层时,触发了 div 和
文档两个;当我们点击按钮时,触发了按钮、div 和文档。触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象,一层一层往上。
jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发
的事件上时,所有上层的冒泡行为都将被取消。
$('input').click(function (e) {
alert('按钮被触发了!');
e.stopPropagation();
});
网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹
出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
$('a').click(function (e) {
e.preventDefault();
});
//禁止提交表单跳转
$('form').submit(function (e) {
e.preventDefault();
});
注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时
写上:event.stopPropagation()和 event.preventDefault()。这两个方法如果需要同时启用的时候,
还有一种简写方案代替,就是直接 return false。
$('a').click(function (e) {
return false;
});

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

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

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

  2. jquery的冒泡和默认行为

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

  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. C# 判断操作系统的位数

    判断操作系统的位数有一下几种方法: 1. 特征值IntPtr 2. WMI 1的实现如下: public static int GetOSInfo() { if (IntPtr.Size == 8) ...

  2. FastAdmin 插件配置文件 info.ini 中的 state 什么意思?

    FastAdmin 插件配置文件 info.ini 中的 state 什么意思? 在插件配置中有一个 state ,这是配置插件开关的.

  3. bzoj2330糖果

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2330 差分约束裸题.练习用spfa判正环(一个点入队超过n次). 据说有1e5个点连成一条链 ...

  4. equals方法和==的区别

    equals方法和==的区别   首先大家知道,String既可以作为一个对象来使用,又可以作为一个基本类型来使用.这里指的作为一个基本类型来使用只是指使用方法上的,比如String s = &quo ...

  5. AngularJS 最佳实践

    AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地实现业务逻辑. 举个栗子,要做到下面的效果,以前可能需要写一连串的 JavaScript 代码绑定 N ...

  6. linux下今天遇到的问题

    之前由于测试需要,必须用mysql5.7的客户端, 现在由于产品完善,开始支持5.6,所以需要装5.6的客户端做测试,考虑到手工测试的效率及不可重复性,准备自动化执行原来的用例. 老的用例是用MySQ ...

  7. mysql为什么会慢

    --2019.4.18 mysql技术大会分享--叶金荣mysql为什么会慢性能瓶颈分析.排查思路 先确认一下真的是mysql响应慢了吗导致mysql慢可能会有那些因素呢?--资源稀缺 ---cpu, ...

  8. c#静态构造函数与构造函数

    构造函数这个概念,在我们刚开始学习编程语言的时候,就被老师一遍一遍的教着.亲,现在你还记得静态构造函数的适用场景吗?如果没有,那么我们一起来复习一下吧. 静态构造函数是在构造函数方法前面添加了stat ...

  9. SQOOP 添加oracle 驱动

      我的ORACLE 是11G  ,找到ojdbc6.jar,放到sqoop 的lib 下面,我的是cloudera 集群,目录是 /opt/cloudera/parcels/CDH-5.10.0-1 ...

  10. 代理Servlet过滤器

    Spring Security借助一些列Servlet 过滤器 来提供 各种 安全性功能. 我们只需要在应用中的 web.xml 中配置 一个过滤器. <filter> <filte ...