jQuery中的事件冒泡
1.什么是冒泡
eg:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡</title>
<script src="../../js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function () {
//为span元素绑定click事件
$('span').bind('click', function () {
var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
$('#msg').html(txt); });
//为span元素绑定click事件
$('#content').bind('click', function () {
var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
$('#msg').html(txt);
});
//为span元素绑定click事件
$('body').bind('click', function () {
var txt = $('#msg').html() + '<p>body元素被点击</p>';
$('#msg').html(txt);
});
}); </script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
</div>
<div id="msg"></div>
</body>
</html>
当你单击‘内层span元素’时,即触发<span>元素的click事件时,会输出3条记录
即:
内层span元素被点击
外层div元素被点击
body元素被点击
这就是事件冒泡引起的。
2.事件冒泡引发的问题
01.事件对象
在程序中使用事件对象,只需要为函数添加一个参数,jQuery代码如下:
$('element').bind('click',function(event){ //event:事件对象 });
02.停止事件冒泡
在jQuery中提供了stopPropagation()方法来停止事件冒泡
以span元素绑定click事件为例:
//为span元素绑定click事件
$('span').bind('click', function (event) { //event:事件对象
var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
$('#msg').html(txt);
event.stopPropagation(); //停止事件冒泡
});
当你单击‘内层span元素’时,即触发<span>元素的click事件时,这时只会输出1条记录
即:
内层span元素被点击
这样就解决了冒泡问题
03.阻止默认行为
网页中的元素有自己默认的行为,例如,单击超链接后会跳转,单击‘提交’表单会提交,有时需要阻止元素的默认行为
在jQuery中,提供了preventDefault()方法来阻止元素的默认行为。
eg:以输入提交为例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../../js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function () {
$('#sub').bind('click', function (event) {
var username = $('#username').val(); //获取元素的值
if (username == "") { //判断是否为空
alert('文本框的值不能为空'); //提示信息
event.preventDefault(); //阻止默认行为(表单提交)
}
});
});
</script>
</head>
<body>
<form action="/">
用户名:<input type="text" id="username" />
<input type="submit" value="提交" id="sub" />
</form>
</body>
</html>
假如你不输入内容,这样就可以阻止默认行为(表单提交)
总结:如果想同时对事件停止冒泡和默认行为,可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。
在上面表单的例子中,可以把
event.preventDefault(); //阻止默认行为(表单提交)
改写为:
return false; 也可以把事件冒泡中的 event.stopPropagation(); //停止事件冒泡
改写为:
return false; 04.事件捕获
05.事件对象的属性
事件对象的属性 详情请参考:http://www.w3school.com.cn/jsref/dom_obj_event.asp
jQuery中的事件冒泡的更多相关文章
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- 在jQuery中解决事件冒泡问题
<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...
- 你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?
事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
- 关于JQuery中的事件冒泡
什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
- jQuery 中的事件冒泡和阻止默认行为
1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
- 【jQuery】jQuery中的事件捕获与事件冒泡
在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序. 一.事件冒泡( Event Bubbling) IE 的事件流叫做事件冒泡,即 ...
- jquery中怎样防止冒泡事件
jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
随机推荐
- Spring源码追踪2——xml解析入口
解析xml节点入口 org.springframework.beans.factory.xml.DefaultBeanDefinitionDocumentReader.doRegisterBeanDe ...
- webapi mvc 基础
标题 状态 描述 WebAPI请求 http://www.cnblogs.com/babycool/p/3922738.html Media Formatters in ASP.NET W ...
- 2015 Android Dev Summit(安卓开发峰会)第一天
今年的Google I/O没有抽到票,不能到现场参加.不过11月举行的Android Dev Summit的票是先到先得的方式,所以早早的提交了注册.今天终于有机会当面跟Android系统的设计开发者 ...
- 3种归并操作js代码
/**良哥的*/ function merge(a, b) { var aLen = a.length, bLen = b.length, maxLen = Math.max(aLen, bLen), ...
- 重构第1天:封装集合(Encapsulate Collection)
理解:封装集合就是把集合进行封装,只提供调用者所需要的功能行借口,保证集合的安全性. 详解:在大多的时候,我们没有必要把所有的操作暴露给调用者,只需要把调用者需要的相关操作暴露给他,这种情况中下我们就 ...
- WebApp MVC,“不一样”的轻量级互联网应用程序开发框架
WebApp MVC 这是一个专门开发互联网程序的开发框架,跟之前的<EFW框架>使用情况不一样,EFW主要用于开发行业软件的快速开发:而WebApp又区别与别的MVC框架,比如AspNe ...
- 【Android学习】数据传递三种方式
1.Application 注意在清单文件中的Application节点下注册android:name属性, 继承Application类,重写onCreate方法, 使用数据时,实例化自定义类时需要 ...
- JS获取跨域的cookie实例
如果说JS能实现跨域cookie,你可能觉得不太可能实现,不过事实上,这个还是可以搞定的,不过需要一定的条件才行的哦!具体方案如下: 一共需要3个文件,第一个文件为需要获取cookie的页面,在这个页 ...
- 尝试在virtualbox fedora21 下安装additions和mount share folder
安装这个additions的过程,基本上可以参照 http://gamblisfx.com/how-to-install-virtualbox-guest-additions-on-fedora-21 ...
- 封装系统自带的Debug
Unity3d的Debug.Log函数用于打印日志,一般项目中都会对其作如下两件事情: (1)希望有一个总的开关来控制整个游戏中日志的打印与否: (2)有的系统会将Log封一层并添加统一的标记,比如S ...