prevent click happen in a children element
<p>I set a event to a <code>wrapper div</code>, but inside this <code>div</code>, i have some <code>buttons</code>, how can i <strong>prevent</strong> this <code>wrapper</code> event happen in the <code>buttons</code> ?</p>

<p><strong>html</strong>:</p>

<pre><code>&lt;div class="wrapper-alert"&gt; &lt;!-- click here will pop-up --&gt;
   &lt;div class="somethingElse"&gt; &lt;!-- click here will pop-up --&gt;
      Some text            
   &lt;/div&gt;
   &lt;div class="this-is-my-action"&gt;
      &lt;button class="inside-alert"&gt;Inside&lt;/button&gt; &lt;!-- click here will NOT pop-up--&gt;
   &lt;/div&gt;
   &lt;div class="somethingElseTo"&gt; &lt;!-- click here will pop-up --&gt;
      Some text            
   &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>i made a <a href="http://jsfiddle.net/NxnW2/37/" rel="nofollow"><strong>jsfiddle</strong></a> to be more clear.</p>

<p>so, basicly, if i click in the <code>wrapper-alert</code> some message will pop-up, but if i click in the <code>button</code> other thing will happen, <strong>the problem is that the buttons are children from wrapper, so 2 events will fire at once.</strong></p>

<p>i have try something with <code>if (e.target !== this) return;</code> but works only with one <code>children</code>, or some basic structure.</p>
