<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. day06<面向对象>

    面向对象(面向对象思想概述) 面向对象(类与对象概述) 面向对象(学生类的定义) 面向对象(手机类的定义) 面向对象(学生类的使用) 面向对象(手机类的使用) 面向对象(一个对象的内存图) 面向对象( ...

  2. swift - UIPickerView 的使用

    效果显示数下图: 1.初始化 pickerView.center = self.view.center //将dataSource设置成自己 pickerView.dataSource=self // ...

  3. linux命令在文件中根据命令查找

    find . -type f -name "*.tmp" | xargs grep -ri "2016-08-30 04:00:00|2016-08-30 05:00:0 ...

  4. Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器[摘抄]

    [文章作者:张宴 本文版本:v6.3 最后修改:2010.07.26 转载请注明原文链接:http://blog.s135.com/nginx_php_v6/] 前言:本文是我撰写的关于搭建“Ngin ...

  5. iOS 数据类型转换

    1.NSString转化为UNICODE String:(NSString*)fname = @“Test”; char fnameStr[10]; memcpy(fnameStr, [fname c ...

  6. 学习C++服务端一:MySql与C++

    mysql学习: http://www.cnblogs.com/cy163/archive/2008/10/16/1312277.html http://developer.51cto.com/art ...

  7. PropertyPlaceholderConfigurer读取配置文件

    1. PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是 BeanFactoryPostProcessor接口的一个实现.PropertyPlaceho ...

  8. apt-get install的默认安装路径

    apt-get 命令 sudo apt-get update sudo apt-get install tree sudo apt-get -y install tree //跳过系统提示,直接安装. ...

  9. linux常用的一些访问目录

    救命三键(Ctrl+Alt+Delete)  /var/log     如果是网络服务的问题时,请到 这个目录里头去查阅一下 log file (登录档): /etc/rc.local    修改挂载 ...

  10. 【黑金ZYNQ7000系列原创视频教程】07.自定义IP——定制RTC IP实验

    黑金论坛地址: http://www.heijin.org/forum.php?mod=viewthread&tid=36641&extra=page%3D1 爱奇艺地址: http: ...