jQuery 中的事件冒泡和阻止默认行为
1、事件冒泡
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//为 <span> 元素绑定 click 事件
$("span").click(function() {
$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
});
//为 Id 为 content 的 <div> 元素绑定 click 事件
$("#content").click(function() {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
});
//为 <body> 元素绑定 click 事件
$("body").click(function() {
$("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
});
});
</script> <!-- CSS -->
<style type="text/css">
#content {
background: #b17af5;
}
</style>
</head> <!-- HTML -->
<body>
<div id="content">
外层div元素<br />
<span style="background: silver;">内层span元素</span><br />
外层div元素
</div><br />
<div id="msg"></div>
</body>
</html>
当点击内部 <span> 元素时，会触发自身及外层 <div> 和 <body> 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。
事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。
修改 <span> 元素的 click 事件函数：
//为 <span> 元素绑定 click 事件
$("span").click(function(event) { //为方法添加一个事件对象参数
$("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
event.stopPropagation(); //阻止 <span> 的 click 事件冒泡
});
此时点击内部 <span> 元素时，只会触发自身的 click 事件，不会再向上冒泡。
jQuery 中的事件冒泡和阻止默认行为的更多相关文章
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- 锋利的jQuery-4--阻止事件冒泡和阻止默认行为
阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...
- javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
随机推荐
- 我对Jenkins的认识
参考: http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.html
- [BZOJ1146][CTSC2008]网络管理Network
[BZOJ1146][CTSC2008]网络管理Network 试题描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门之间协同工作,公司搭建 ...
- Lua手动编译姿势
LUA-5.3.3.tar.gz Lua源码+链接2016年5月30日更新 手动编译姿势: 已经装有VS2010 使用VS自带的 cl.exe以及 VS命令簿 打开文件地址 运行自己的bat文件 my ...
- Python自动化之django URL
URL url(r'^detail-(?P<nid>\d+)-(?P<uid>\d+).html', views.detail) 会把(?P\d+)和(?P\d+)传到后台 需 ...
- Nginx概念及基础安装--详细讲解
1.主要内容: Nginx的基础 特性 配置部署 优化(了解) 2.Nginx 是什么? Nginx是一个开源的,支持高性能,高并发的www ...
- Java的native方法
一. 什么是Native Method 简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由非j ...
- 无法启动"D\projects\hello\Debug\hello.exe" 系统找不到指定的文件。[LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏]
这两天安装Visual Studio遇到这样的一个问题,用自己的电脑和公司的电脑都出现同样的问题.两台电脑都是新系统,按理来说是没有问题的.但是一出现问题,对于我这个小白来说,还是耗费了挺多精力都无果 ...
- sql 删除表中某字段的重复数据
重复字段:BarCode SELECT * FROM dbo.AssetBarCode WHERE BarCode IN (SELECT BarCode FROM dbo.AssetBarCode G ...
- could not insert new action connection could not find any information for the class named
玩代码的时候遇到一问题,用的 storyboard 的时候分页不能自动获取到类,Automatic 里是空的,然后自动选到该类下的时候控件貌似可以拖过去,但是当 cennect 的时候会报错:“cou ...
- spark伪分布式安装
一,在官网下载对应的版本http://spark.apache.org/downloads.html 二在linux中解压下来的spark包 三:配置环境变量 (1)在/etc/profi ...