jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为
参考资料:
《锋利的jQuery》 作者:单东林 张晓菲 魏然 出版社: 人民邮电出版社
1、事件冒泡
[javascript] view plaincopy
- <%@ 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 事件,不会再向上冒泡。
2、阻止默认行为
有时候用户的操作未满足某些条件时,需要阻止某些元素的默认行为,如链接的跳转和表单的提交等,jQuery 提供了 preventDefault() 方法来实现。
当用户未填写用户名时,阻止表单提交:
- <%@ 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() {
- $(":submit").click(function(event) { //为方法添加一个事件对象参数
- //当未输入用户名时,提示并阻止提交
- if ($(":text").val() == "") {
- $("#msg").text("用户名不能为空");
- event.preventDefault(); //阻止提交按钮的默认行为(提交表单)
- }
- });
- });
- </script>
- </head>
- <!-- HTML -->
- <body>
- <form action="register.action">
- 用户名<input type="text" name="id" />
- <input type="submit" value="注册" />
- <div id="msg"></div>
- </form>
- </body>
- </html>
如果想同时阻止事件冒泡和阻止元素默认行为,可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
如:
- $(":submit").click(function(event) { //为方法添加一个事件对象参数
- //当未输入用户名时,提示并阻止提交
- if ($(":text").val() == "") {
- $("#msg").text("用户名不能为空");
- return false; //阻止提交按钮的默认行为(提交表单)和事件冒泡
- }
- });
- $("span").click(function(event) { //为方法添加一个事件对象参数
- $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
- return false; //阻止 <span> 的 click 事件冒泡和默认行为(此元素没有默认行为)
- });
jQuery 中的事件冒泡和阻止默认行为相关推荐
- jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡 事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
- Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
- JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
- 带你学习JQuery:事件冒泡和阻止默认行为
首先说什么是冒泡呢,简单的意思就是,你本来想只触发一个时间,但是实际上却出发了N个事件. 举例来说,有一个元素,如Span,你绑定了一个Click函数,你又为Div绑定了一个Click函数,而这个Sp ...
- jquery阻止默认行为_Jquery 事件冒泡 以及阻止默认事件
1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:xx $("#xx").click(function(e) ...
- javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- Js阻止事件冒泡与阻止默认事件
1.event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行.不让事件向document上蔓延,但是默认 ...
最新文章
- python语言自学教程-3D图示Python标准自学教程入门篇
- 地址里面写转某快递会转吗_到付邮费骗局还在继续,合肥某公司中招!商标申请人要警惕!...
- Mysql8 InnoDB Cluster Shell Router HA配置图解
- 纯javascript实现pdf签名_Mac最强PDF编辑工具
- 基于深度学习的信道估计(DL-CE)基础知识
- opencv2.4.7.2画圆,画十字,画矩形
- 旅游管理系统设计图; 毕业论文概述
- 第一行代码(Android)第二版PDF和源码
- linux物理服务器搬迁后,更换了路由器,ping不同外网
- 计算机格式化后数据恢复的基础,电脑硬盘格式化后数据能恢复吗
- Ubuntu 配置磁盘挂载到指定目录
- docker的常用命令(镜像、容器常用操作)
- 西直门立交桥的破事儿
- 30岁学习编程晚么?
- mac邮箱无法验证账户名和密码问题
- OpenCV-文字绘制cv::putText
- 杭州千岛湖|杭州千岛湖风景介绍|杭州千岛湖景点介绍
- 《用户体验设计:100堂入门课》20190920
- Esper学习之十:EPL语法(六)
- 大学生实习就业调研报告:8个共性问题与企业CTO/CEO/HR管理者探讨
热门文章
- r5 4600u和r5 4500u 对比差距大吗
- 贵阳大数据交易所:先行先试“掘金”数据!
- CSS样式:小米商城导航栏及下拉菜单小项目
- 卡西欧科学计算机寿命,卡西欧手表电池能用多久 卡西欧手表电池寿命有多长...
- 工具素材分享篇:拍摄剪辑与视频制作必备!
- 自由操控声音-相位声码器-变调篇(一)
- 邹城市计算机学业水平考试,山东省济宁市邹城市2020届九年级学业水平考试第一次模拟检测物理试题...
- 京东商品接口加解密算法解析
- matlab之保存gif动图
- java-net-php-python-ssm二手手机回购网站计算机毕业设计程序