JQuery 取消时间冒泡

最新推荐文章于 2024-05-01 22:58:15 发布

原创最新推荐文章于 2024-05-01 22:58:15 发布 · 689 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的示例，展示了如何使用JavaScript阻止事件冒泡。通过为不同大小的div元素注册点击事件，当用户点击小的div时，可以阻止事件传播到大的div。此方法适用于跨浏览器环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取消事件冒泡
效果

这是刚进入时的效果

我们想要实现的效果是：1.鼠标点击大的方框内容时弹出警告窗口（这是大的div）,不包括点击小的div内部部分

2.鼠标点击大的方框内容时弹出警告窗口（这是小的div）,但是不弹出警告（这是大的div），

以下是实现效果

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'day03.jsp' starting page</title>
         <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 这是给div 设置的表框的一些属性 -->
	<style type="text/css">
	
        #bigdiv {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #smalldiv {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
      </style>


<script type="text/javascript">
$(function(){
//给大div注册事件
$("#bigdiv").click(function(){
alert('big div');
});
//给小的div注册事件
$("#smalldiv").click(function(event){
alert('小的  div');

//取消事件冒泡
//第一道能力检测:分浏览器

//UI工程师  能力检测
//判定浏览器引擎是IE还是其他浏览器(第一道能力检测)
event=event||window.event;
	//第二道能力检测   
if(event.stopPropagation){//非IE浏览器  chrome  IE6以上就差不多都可以了 
event.stopPropagation();
}else{
	//IE浏览器
event.cancelBubble=true;
    }
          });
  });



</script>
  </head>
  
  <body>
 <div id="bigdiv">我是大的div
 <div id="smalldiv">我是小的div</div>
 </div>
  </body>
</html>