浅谈jQuery 中的事件冒泡和阻止默认行为
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
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="/UploadFiles/2021-04-02/jquery-1.7.2.js">当点击内部 <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="/UploadFiles/2021-04-02/jquery-1.7.2.js">如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 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取消事件冒泡的三种方法(推荐)