在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()
随机推荐
- 查看当前mysql数据库实例中,支持的字符集有哪些,或者是否支持某个特定字符集
需求描述: 查看当前mysql实例中支持哪些字符集,过滤特定的字符集 操作过程: 1.通过show character set来进行查看 mysql> show character set; + ...
- shell基础篇(十)shell脚本的包含
前记 写到这里:shell中基础差不多已经讲完了.希望你已经对shell有了一个基本了解.你可能跃跃欲试,要写一些程序练习一下.这会对你很有好处.建议大家去chinaunix去学习:我是li0924. ...
- Linux dstat 命令
dstat 是一个监控系统资源使用情况的工具,常见用法如下: [root@localhost ~]$ yum install -y dstat [root@localhost ~]$ dstat -- ...
- linux下串口调试工具/串口终端推荐: picocom(转)
对于picocom, kermit, minicom, picocom 最简单易用,也完全符合我的使用需求. 安装(mint / ubuntu):$ sudo apt-get install pico ...
- 深入浅出MFC——Win32程序基本概念(一)
1. Windows程序分为“程序代码”和“UI资源”,下图所示: 2. Windows支持动态链接(应用程序所调用的Windows API函数是在“执行时期”才链接上的).Windows程序调用的函 ...
- Eclipse failed to get the required ADT version number from the sdk
failed to get the required ADT version number from the sdk 解决方法: eclipse 和 android studio 工具不能同时共用同一 ...
- VScode之JavaScript Snippet Pack
一个片段包 使用例如: cl 回车或者tab键,就可以完整的打出console.log("") 还有很多快捷功能: 参考: https://marketplace.visualst ...
- CRUX下实现进程隐藏(1)
想必能找到这里的都是被吴一民的操作系统大作业坑过的学弟学妹了,当初我也是千辛万苦才把这个作业完成了,本着服务后辈的宗旨,尽量让学弟学妹少走弯路,我会把实现的大概思路记录下来.本系列一共三篇文章,分别实 ...
- SSH配置优化和慢的解决方法
author: headsen chen date: 2018-08-18 00:28:37 ssh配置优化 vim /etc/ssh/sshd_config 1,修改root端口 2,不允许ro ...
- java中生成流水号的一个例子(使用BerkeleyDB)
package com.jiaoyiping.berkeleydb; import com.sleepycat.je.*; import com.sleepycat.utilint.StringUti ...