stop internal div from firing event associated with external div

stop internal div from firing event associated with external div

Hi,
if I have a button within a div, how do I stop the internal button clicks from also triggering the click event on the surrounding div?

Here's the div and button:

  1.                     <div id="externalDiv" class="ui-li ui-li-static ui-btn-up-c">
  2.                         <h1>When the user clicks the button, I do not want the external click event to fire</h1>
  3.                         <div>
  4.                             <a href="#" data-role="button" id="internalButton">Internal Button</a>
  5.                         </div>
  6.                     </div>

and here are the events:

  1.             $('#externalDiv').click(function () {
  2.                 alert('external div clicked');
  3.             });

  5.             $('#internalButton').click(function () {
  6.                 alert('internal button clicked');
  7.             });

thanks

Matt