在jQuery中解决事件冒泡问题
<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中解决事件冒泡问题的更多相关文章
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- 关于JQuery中的事件冒泡
什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
- 你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?
事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
- 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()
随机推荐
- linux环境,crontab报错Authentication token is no longer valid; new one required You (aimonitor) are not allowed to access to (crontab) because of pam configuration.
问题描述: 今天同事反应,一个系统上的某些数据没有生成,看了下,怀疑定时任务没有执行,就看下了crontab,发现报了下面的错误: [aimonitor@4A-LF-w08 ~]$ crontab - ...
- 3、手把手教React Native实战之flexbox布局
flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...
- Java精选笔记_IO流(字符输入输出流、字符文件输入输出流、字符流的缓冲区)
字符流 Reader是字符输入流的基类,用于从某个源设备读取字符 Writer是字符输出流,用于向某个目标设备写入字符 字符流操作文件 字符输入流FileReader,通过此流可以从关联的文件中读取一 ...
- Vs2010创建WebService
在Visual Studio 2010中已经找不到直接创建WebService的模板方式了,但下面的方法可心实现: 在 Visual Studio 2010 的新建 Web 应用程序或者 Web 网站 ...
- 连接oracle服务器超慢--原因分析
连接oracle服务器超慢:有如下原因可能会影响. 网络不好:oracle服务器跟本地网络不好. oracle服务器内存不足:导致反应超慢 监听日志listener.log太大:导致响应超慢. 所以对 ...
- docker学习-docker安装
win10之外的系统:https://www.docker.com/products/docker-toolbox win10系统: https://www.docker.com/pro ...
- Effective C++ —— 构造/析构/赋值运算(二)
条款05 : 了解C++默默编写并调用哪些函数 编译器可以暗自为class创建default构造函数.copy构造函数.copy assignment操作符,以及析构函数. 1. default构造函 ...
- 为什么在js当中没有var就是全局变量
因为,在js中,如果某个变量没有var声明,会自动移到上一层作用域中去找这个变量的声明语句,如果找到,就是用,如果没找到, 就继续向上寻找,一直查找到全局作用域为止,如果全局中仍然没有这个变量的声明语 ...
- Java——我的概念
1.多态:(1)父类变量引用子类对象;(2)该引用只能调用父类中定义的方法和变量;(3)如果子类中重写了父类中的一个方法,那么在调用这个方法的时候,将会调用子类中的这个方法;(动态连接.动态调用)
- poj_2739 尺取法
题目大意 给定一个数字N,N可能由1个或多个连续的素数求和得到,比如41 = 2+3+5+7+11+13, 41 = 11+13+17, 41 = 41.求出对于N,所有可能的组合形式. 题目分析 先 ...