<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style type="text/css">
? ? ? ? .grandfather{
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height:300px;
? ? ? ? ? ? background-color:green;
? ? ? ? ? ? position:relative;
? ? ? ? }
? ? ? ? .father{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background-color:gold;
? ? ? ? }
? ? ? ? .son{
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height:100px;
? ? ? ? ? ? background-color:red;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? left:0;
? ? ? ? ? ? top:400px;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
? ? <script type="text/javascript">
? ? ? ? $(function(){
? ? ? ? ? ? $('body').click(function() {
? ? ? ? ? ? ? ? alert(4);
? ? ? ? ? ? });
? ? ? ? ? ? $('.grandfather').click(function() {
? ? ? ? ? ? ? ? alert(3);
? ? ? ? ? ? });
? ? ? ? ? ? $('.father').click(function() {
? ? ? ? ? ? ? ? alert(2);
? ? ? ? ? ? });
? ? ? ? ? ? $('.son').click(function(ev) {
? ? ? ? ? ? ? ? alert(1);
? ? ? ? ? ? ? ? //ev.stopPropagation();
? ? ? ? ? ? ? ? //console.log(ev);
? ? ? ? ? ? ? ? //alert(ev.clientX);
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? });
? ? ? ? ? ? $(document).contextmenu(function(event) {
? ? ? ? ? ? ? ? //event.preventDefault();
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</head>
<body>
? ? <div class="grandfather">
? ? ? ? <div class="father">
? ? ? ? ? ? <div class="son"></div>
? ? ? ? </div>
? ? </div>
</body>
</html>
