js click events of nested elements
<p>I have a list with div items. each of them redirects to a page when I click it. 
Now I added a button within the div and I do not want to get redirected when I click the button (i.e. do not execute the parent divs on click event)</p>

<pre><code>&lt;div class='item' onClick="alert('div');"&gt;
... div content
    &lt;button class='btn' onClick="alert('button');"&gt;Action&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>Above code should only alert once when I click the button.</p>

<p>EDIT:</p>

<p>I just realized that my actual problem is even one more level up:</p>

<pre><code>&lt;a href='www.google.at'&gt;
&lt;div class='item' onClick="alert('div');"&gt;
    &lt;button class='btn' onClick="alert('button');event.stopPropagation();"&gt;Action&lt;/button&gt;
&lt;/div&gt;
&lt;/a&gt;
</code></pre>

<p>I need to prevent the href redirection when I click the button. Is there something similar to event.stopPropagation()?</p>