How can on click div2 show a message jquery

In the example below on click div2 show a message for div2 only , not show the message of div1 ?This required....How can do this ...I hope to get the solution... Gratefully In the example below on click div2 show a message for div2 only , not show the message of div1 ?This required....How can do this ...I hope to get the solution... Gratefully

<!DOCTYPE html >
<html>
<head>
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
    <title>click on div2 jquery </title>
    <script type="text/javascript">
        $('document').ready(function () {
            $('#div1').click(function () {
                alert("div1");
            });

            $('#div2').click(function () {
                alert("div2");
            });
        });
    </script>
    <style type="text/css">
        #div1
        {
            position: absolute;
            height: 147px;
            width: 336px;
            right: 38%;
            top: 49px;
            border-radius: 10px;
           border: medium solid #FF0000;               
        }
        #div2
        {
            position: absolute;
            height: 58px;
            width: 175px;
            right: 27%;
            top: 42px;
            border-radius: 10px;
            border: medium solid #0000FF;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>
<body>
	<div id="div1">
        <div id="div2">
             click on div2 jquery
        </div>
    </div>
</body>
</html>

Solution

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html >
<html>
<head>
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
    <title>click on div2 jquery </title>
    <script type="text/javascript">
        $('document').ready(function () {




            $('#div1').click(function () {
                alert("div1");



            });


            $('#div2').click(function (event) {
              event.stopPropagation();
                alert("div2");



            });

        });
    </script>
    <style type="text/css">


        #div1
        {
            position: absolute;
            height: 147px;
            width: 336px;
            right: 38%;
            top: 49px;
            border-radius: 10px;
           border: medium solid #FF0000;
           
        }

               #div2
        {
            position: absolute;
            height: 58px;
            width: 175px;
            right: 27%;
            top: 42px;
            border-radius: 10px;
            border: medium solid #0000FF;
            text-align: center;
            font-weight: 700;
                }


    </style>
</head>
<body>

        <div id="div1">

        <div id="div2">
             click on div2 jquery
        </div>
         </div>

</body>
</html>