jquery,禁止冒泡和默认行为
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题。
//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,禁止冒泡和默认行为的更多相关文章
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- jquery的冒泡和默认行为
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题. //HTML 页面 <div style="width:200px;height:200px; ...
- jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...
- jQuery event,冒泡,默认事件用法
jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- jQuery 事件冒泡
1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...
随机推荐
- 《DSP using MATLAB》 Problem 2.3
本题主要是显示周期序列的. 1.代码: %% ------------------------------------------------------------------------ %% O ...
- 洛谷P4197 Peaks(Kruskal重构树 主席树)
题意 题目链接 往后中文题就不翻译了qwq Sol 又是码农题..出题人这是强行把Kruskal重构树和主席树拼一块了啊.. 首先由于给出的限制条件是<=x,因此我们在最小生成树上走一定是最优的 ...
- 建立dblink(database link)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bisal/article/details/26730993 database linke是建立一个数 ...
- 提高ASP.NET页面载入速度的方法
前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 目录 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流str ...
- springmvc 使用Jackson的配置
<!--start:使用Jackson 1.x的配置,需要导入的jar包:jackson-core-lpgl-xxx.jar.jackson-mapper-lgpl-xxx.jar --> ...
- 【python】python实例集<二>
##扫描某个ip的端口号 # #-*- coding: utf-8 -*- # import socket # def main(): # sk = socket.socket(socket.AF_I ...
- Python自然语言处理(1):初识NLP
由于我们从美国回来就是想把医学数据和医学人工智能的事认真做起来,所以我们选择了比较扎实的解决方法,想快速出成果的请绕道.我们的一些解决方法是:1.整合公开的所有医学词典,尽可能包含更多的标准医学词汇: ...
- Python笔试题&面试题总结
黑色加粗的是笔试题,蓝色是面试题 1.什么是GIL 2.Python中的@staticmethod和@classmethod的区别 (**) 3.Python里面如何拷贝一个对象,并解析深浅拷贝 4. ...
- ReportViewer 2010 打印预览,用鼠标快速切换显示比例时报错:存储空间不足,不能处理此命令
CreateCompatibleDIB 存储空间不足 无法处理此命令 安装 ReportViewer 2010 sp1 即可.
- jsp---猜数字游戏,深有感触
猜数字游戏注意两点.1.随机数和猜的数字不能放在同一个页面,不然随机数不停出现,猜的数字不可能相等的. 2.数据类型的相互转换.包装类Integer和int的用法,前者是类,后者是基本数据类型 cai ...