Event Propagation test

HTML

<p>Click on any box to see the effect:</p>
<div id="outerdiv">OUTER BOX CONTENT
    <div id="innerdiv">
        <input id="button" type="button" value="Button" />
    </div>
</div>

CSS

#outerdiv {
    background-color:#e0e0e0;
}
#innerdiv {
    background-color:#404040;
}
#button {
}

JavaScript

$(document).ready(function () {
       $("#button").click(function (event) {
           
           // Comment the following to see the difference
           event.stopPropagation();
       });
       
       $("#outerdiv").click(function (event) {
           alert("This is the outer div.");
       });
       function test () {
       	alert("This is the button.");
       }
   });