<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. 安装Phoenix时./sqlline.py执行报错File "./sqlline.py", line 27, in <module> import argparse ImportError: No module named argparse解决办法(图文详解)

    不多说,直接上干货! 前期博客 Apache版Phoenix的安装(图文详解) 问题现象 Traceback (most recent call last): File , in <module ...

  2. Mike Gancarz:Linux/Unix设计思想

           Mike Gancarz是一位技术布道者. 他是Linux/Unix最基本的倡导者之中的一个,也是最早开发X Window System的先驱.他把一些在Unix/Linux社区里口口相 ...

  3. 7 -- Spring的基本用法 -- 3... Spring 的核心机制 : 依赖注入

    7.3 Spring 的核心机制 : 依赖注入 Spring 框架的核心功能有两个. Spring容器作为超级大工厂,负责创建.管理所有的Java对象,这些Java对象被称为Bean. Spring容 ...

  4. RMQ LAC 入门

    RMQ RMQ (Range Minimum/Maximum Query)问题是指:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j里的最小(大) ...

  5. 查看系统进程:ps

    ps命令用于查看系统进程,常见用法如下: [root@localhost ~]$ ps aux # 查看所有的进程 [root@localhost ~]$ ps aux | grep nginx # ...

  6. DOCKER在windows上安装与配置

    1.下载程序 安装包 https://github.com/boot2docker/windows-installer/releases(这个地址国内下载很慢) 用这个: https://get.da ...

  7. js 判断数据类型的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

  8. php数据访问之查询关键字

    本文根据数据库中的car表做一个汽车查询页面,巩固php查询关键字操作,感兴趣的小伙伴们可以参考一下   本文实例为大家分享了php查询操作的实现代码,供大家参考,具体内容如下 一.一个关键字查询 主 ...

  9. Bootstrap迁移系列 - Modal

    原来项目是使用2.x完成的,现在需要使用3.x进行升级. 对jQuery的依赖 请注意,所有JavaScript插件都依赖jQuery,在页面中的引入顺序可以参考基本模版. bower.json中列出 ...

  10. OpenLayers基础知识:

     OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能.OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSV ...