我们想要实现的效果是:1.鼠标点击大的方框内容时弹出警告窗口(这是大的div),不包括点击小的div内部部分
2.鼠标点击大的方框内容时弹出警告窗口(这是小的div),但是不弹出警告(这是大的div),
以下是实现效果
[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
<%@ 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>