html实例:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#parent{
height:500px;
width: 200px;
border: 1px solid red;
margin:auto;
}
#child_one{
height: 200px;
width: 100px;
border: 1px solid blue;
}
.child_two{
height: 100px;
width: 50px;
border: 1px solid black;
}
#first{
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="parent">
<div id="child_one">
<div id="first">
</div>
</div>
<div class="child_two">
</div>
</div>
</body>
</html>
方法一:通过JS
document.getElementById('parent').onclick=function(e){
var e = e || window.event;
var elem = e.target;
var targetArea = document.getElementById('child_one');
if(targetArea.contains(elem)){
alert("在区域内");
}else{
alert("在区域外");
}
}
方法二:通过Jquery
$('#parent').click(function(e){
var e = e || window.event;
var elem = e.target;
if($(elem).is('#child_one') || $(elem).is('#child_one *')){
alert("在区域内");
}else{
alert("在区域外");
}
})