Prevent the triggering of a click()
<p>I have a few smaller div nested within a larger div. 1 specific small div <code>#small</code>and the large div <code>#large</code> have jQuery <code>click()</code> event handler attached to them.</p>

<p><strong>Problem:</strong> How do I make it such that when a click happens inside that one smaller nested div, the <code>click()</code> handler of the larger div is not fired, only the one for the smaller div is? The <code>click()</code> of the larger div must still fire if the click occurs in the <em>other</em> smaller divs.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="large"&gt;
    &lt;div id="small"&gt;&lt;/div&gt;
    &lt;div id="small_2"&gt;&lt;/div&gt;
    &lt;div id="small_3"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$("#large").click(function() {
    console.log('large');
}

$("#small").click(function() {
    console.log('small');
}
</code></pre>
