<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端
解决方法:在事件处理函数中返回false，会对事件停止冒泡。

还可以停止元素的默认行为。例如：可以阻止a标签的提交


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>事件冒泡</title>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script type="text/javascript">

	$(function (){

		/**

		 * 事件会按照DOM层次结构像水泡一样不断向上直至顶端

		 * 解决方法:在事件处理函数中返回false，会对事件停止冒泡。

		 * 还可以停止元素的默认行为。例如：可以阻止a标签的提交

		 */

		$("body").click(function (){

			alert("body");

		});

		$("div").click(function (){

			alert("div");

			return false;

		});

		$("span").click(function (){

			alert("span");

			return false;

		});

	});

</script>

</head>

<body>

	<div style="width:400px;height:100px;background:#CCC;">

		<span style="margin:auto;width:200px;height:50px;background:yellow;">事件冒泡</span>

	</div>

</body>

</html>
												


											
在jQuery中解决事件冒泡问题的更多相关文章
	

    
								
  1. jquery 中的事件冒泡
		
    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
    
		
    2. 
						
  2. jQuery中的事件冒泡
		
    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
    
		
    3. 
						
  3. JQuery中阻止事件冒泡的两种方式及其区别
		
    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...
    
		
    4. 
						
  4. JQuery中阻止事件冒泡方式及其区别
		
    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...
    
		
    5. 
						
  5. 关于JQuery中的事件冒泡
		
    什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
    
		
    6. 
						
  6. 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
		
    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
    
		
    7. 
						
  7. jQuery 中的事件冒泡和阻止默认行为
		
    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
    
		
    8. 
						
  8. 【jQuery】jQuery中的事件捕获与事件冒泡
		
    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...
    
		
    9. 
						
  9. jquery中怎样防止冒泡事件
		
    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 搭建LNMP+CI环境
			
    首先搭建 LNMP 的服务器环境 安装 Nginx, MySQL 和 PHP 软件包,执行以下命令 yum install -y nginx mariadb-server mariadb php ph ...
    
			
    2. 
						
  2. brew 的  调度工具DBGPRINTF  和  c语言的 printf
			
    在官方的文档中是这样备注DBGPRINTF Prototype void dbgprintf(const char *pszFormat,...); Description This function ...
    
			
    3. 
						
  3. 第五章 面向方面编程___AOP入门
			
    上一篇讲了 AOP 和 OOP 的区别,这一次我们开始入门 AOP .实现面向方面编程的技术,主要分为两大类: 一是 采用动态代理技术,利用截取消息的方式,对该消息进行装饰,以取代原有对象行为的执行: ...
    
			
    4. 
						
  4. Tomcat之JSP运行原理之小试牛刀
			
    最近空闲看了下JSP/Servlet,以前只知道用JSP,但是对其运行原理知之甚少,今在此做些笔记,以备查阅. 首先简要描述下其运行过程,然后结合Tomcat源码作简要分析. JSP运行过程: 第一步 ...
    
			
    5. 
						
  5. 超全面的JavaWeb笔记day12<Jsp&JavaBean&El表达式>
			
    1.JSP三大指令 page include taglib 2.9个内置对象 out page pageContext request response session application exc ...
    
			
    6. 
						
  6. Effective C++ Item 19 Treat class design as type design
			
    Too high class topic for me now ................... ................... ................... fill the ...
    
			
    7. 
						
  7. CCNet持续集成编译中SVN问题解决
			
    SVN问题 BUILD EXCEPTION Error Message: ThoughtWorks.CruiseControl.Core.CruiseControlException: Source  ...
    
			
    8. 
						
  8. nohub和重定向文件
			
    1.如果使用远程连接的Linux的方式并想后台运行执行如下命令: 格式:nohup <程序名> & 比如:nohup /usr/local/collection/bin/start ...
    
			
    9. 
						
  9. 对double数据类型的数据保留两位小数，并且进行四舍五入
			
    1.代码如下: /** * 对double数据类型的数据 保留两位小数,并且进行四舍五入 * @author Administrator */ public class Main { // 工具类 p ...
    
			
    10. 
						
  10. Spring new对象时注解失效
			
    新建了一个新类(A)后,在类中用注解将属性注入.类名(A)上用 @Component ,类中的一个属性(name)上用 @Autowired或@Resource, 方法(fun)中通过 属性(name ...
    
			
    11.