I click on first div two times then click on the second div one time but get alert two times that "You have clicked on the second div"

I click on first div two times then click on the second div one time but get alert two times that "You have clicked on the second div"

<html>
<head>
<script src=" http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function myfun()
{
alert("You have clicked on first div");
$(".def").click(function () {
alert("You have clicked on the second div");
});
}

</script>
<style>
div
{
border: 1px solid blue;
width :200px;
height: 200px;
margin : 30px;
}
</style>
</head>
<body>
<div class="abc" onclick="myfun();">First Div</div>
<div class="def">Second Div</div>
</body>
</html>