<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. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  3. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  4. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  5. 关于JQuery中的事件冒泡

    什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...

  6. 你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?

    事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...

  7. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  8. 【jQuery】jQuery中的事件捕获与事件冒泡

    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...

  9. jquery中怎样防止冒泡事件

    jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()

随机推荐

  1. libui-node体验笔记

    简介 libui-node是基于libui库的node封装.libui库是一个简便的将本地原生的GUI封装的C语言库,并支持各平台(Mac,Linux,windows).官网提供了第三方封装文档,开发 ...

  2. [java ] java.util.zip.ZipException: error in opening zip file

    严重: Failed to processes JAR found at URL [jar:file:/D:/tools/apache-tomcat-7.0.64_2/webapps/bbs/WEB- ...

  3. System.Func<>与System.Action<>

    使用并行编程可以同时操作多个委托,在介绍并行编程前先简单介绍一下两个泛型委托System.Func<>与System.Action<>. Func<>是一个能接受多 ...

  4. cocos2d-x游戏引擎核心之七——数据持久化

    一.XML与JSON XML 和 JSON 都是当下流行的数据存储格式,它们的共同特点就是数据明文,十分易于阅读.XML 源自于 SGML,是一种标记性数据描述语言,而 JSON 则是一种轻量级数据交 ...

  5. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

  6. Linux下多任务间通信和同步-mmap共享内存

    Linux下多任务间通信和同步-mmap共享内存 嵌入式开发交流群280352802,欢迎加入! 1.简介 共享内存可以说是最有用的进程间通信方式.两个不用的进程共享内存的意思是:同一块物理内存被映射 ...

  7. springjdbc的批量操作

    这里主要是看的官方文档,如何翻译: NamedParameterJdbcTemplate The NamedParameterJdbcTemplate class adds support for p ...

  8. struts2漏洞原理

    一.struts2简介: 目前web框架中非常流行的都是mvc设计模式.经典例子例如:python的Django.Flask:java的ssm等.因为使用MVC设计模式,所以在框架内部处理用户数据流参 ...

  9. jfinal关联查询给dto添加表结构以外的字段并返回的处理方式

    官网栗子: http://www.jfinal.com/doc/5-10 5.10 表关联操作 JFinal ActiveRecord 天然支持表关联操作,并不需要学习新的东西,此为无招胜有招.表关联 ...

  10. 利用trace重建控制文件

    以下步骤,内容都在ora11g_ora_.trc文件中 CREATE CONTROLFILE REUSE DATABASE "ORA11G" NORESETLOGS  ARCHIV ...