当前位置：首页 > 资讯 > 技术文档

浅谈jQuery 中的事件冒泡和阻止默认行为

时间：2021-08-20 23:00 编辑：来源：阅读：
扫一扫，手机访问

摘要：浅谈jQuery 中的事件冒泡和阻止默认行为

[b]1、事件冒泡 [/b]

<%@ 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 事件，不会再向上冒泡。 [b]2、阻止默认行为[/b] 有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，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 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JS实现为排序好的字符串找出重复行的方法
下一篇：js事件冒泡、事件捕获和阻止默认事件详解

资讯排行榜
更多>>