title: Click on parent, ignore its children
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2457246/jquery-click-function-exclude-children">jQuery: click function exclude children.</a>  </p>
  </blockquote>
  
  
  
  <p>I have two <code>div</code>s, something like this:</p>
  
  <pre><code>&lt;div id="parent" style="width: 100%; height: 100%; background-color:red;" /&gt;
      &lt;h1&gt;I'm the parent!&lt;/h1&gt;
      &lt;div id="child" style="width: 300px; height: 200px; background-color:yellow;"&gt;
          &lt;/h2&gt;..and I'm the child!&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Additionally, I have the following JavaScript code:</p>
  
  <pre><code>$(document).ready(function(){
      $('#parent').click(function(){
          alert('Parent was clicked');
      });
  });
  </code></pre>
  
  <p>The problem is, if I click on the <strong>child</strong>, the event is triggered. How can I limit this event to the parent only?</p>
  
  <p>Edit: Just to clarify; I want this action to trigger when the user clicks anywhere in the red. As said in the comments; the <code>h1</code> is not the parent. Tjirp's answer did the trick, and there's a lots of working variants of this solution in the answers.</p>