在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()
随机推荐
- Git 的BUG小结
Git 的BUG小结 Git 在push的时候出现了: fatal: The remote end hung up unexpectedly 在网上找了非常多 发现出现了下面错误提示也可能是同样的问 ...
- Spring------Spring data jpa 定义实体类(@OneToMany等的使用)
转载: https://course.tianmaying.com/spring-data-jpa+one-to-many#2
- ftplib模块【python】
转自:http://www.cnblogs.com/kaituorensheng/p/4480512.html 函数释义 Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实 ...
- Linux lspci 命令
PCI(Peripheral Component Interconnect,外设部件互连标准),即定义连接外部设备的一个标准: 主板上有很多 PCI 接口,用来连接显卡.网卡.声卡等外部设备,而 ls ...
- Win8/8.1下驱动安装“数据无效”错误的有效解决方法
Windows8.1 安装完vmware 后并没有安装 vmnet1,vmnet8 这两个虚拟网卡,纠结了半天,原来是两个服务没打开. 如果你使用的是Windows8或者8.1,并且精简过系统,那么在 ...
- C++异常 将对象用作异常类型
通常,引发异常的函数将传递一个对象.这样做的重要有点之一是,可以使用不同的异常类型来区分不同的函数在不同情况下引发的异常.另外,对象可以携带信息,程序员可以根据这些信息来确定引发异常的原因.同时,ca ...
- BNU4207:台风
东方非想天则(TH12.3)是一款优秀的格斗游戏,其以华丽的弹幕,连贯的技能衔接及优美的音乐吸引了众多玩家(宅男更多-_-),而且各平台上也为其提供了联机的机会. 好了,言归正传,天气系统是本游戏的一 ...
- 【python系列】安装完PyCharm创建项目提示No Python interpreter selected
安装Python解释器 去python官网下载python的安装包(https://www.python.org/downloads/release/python-361/) 注意安装的时候选择配置p ...
- POJ 3461 Oulipo[附KMP算法详细流程讲解]
E - Oulipo Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- WEB安全番外第一篇--其他所谓的“非主流”漏洞:URL跳转漏洞与参数污染
一.URL跳转篇: 1.原理:先来看这段代码: <?php if(isset($_GET["url_redircetion_target"])){ $url_redirect ...