How can I "avoid" mousedown over some inside elements?
<p>My <a href="http://jsfiddle.net/GUPUG/4/" rel="nofollow">code</a> :</p>

<h1>HTML</h1>

<pre><code>&lt;div style="position:relative;"&gt;
    &lt;div class="boxImmagineResultNext"&gt;&lt;/div&gt;
    &lt;div class="boxImmagineResult"&gt;                
        &lt;textarea cols="15" rows="5"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<h1>CSS</h1>

<pre><code>.boxImmagineResultNext
{
    height: 235px;
    position: relative;
    width: 200px;
    z-index: 1;
    display:none;    
}

.boxImmagineResult
{
    background-color: #595959;
    height: 255px;
    position: relative;
    width: 220px;
    z-index: 1;
    top:0;
    left:0;
}
​
</code></pre>

<h1>jQuery</h1>

<pre><code>$('.boxImmagineResult').mousedown(function (e) {
    $(this).css({ 'position': 'absolute', 'z-index': '10' });
    $('.boxImmagineResultNext').show();
});


$('.boxImmagineResult').mouseup(function (e) {
    $(this).css({ 'position': 'relative', 'z-index': '5' });
    $('.boxImmagineResultNext').hide();
});​
</code></pre>

<p>Due to this mechanism, I can't "write" on the textarea. This just on Firefox, for example, on chrome it works as well. It seems "readonly" but in fact it is not.</p>

<p>How can I fix it? I should "avoid" mousedown when I click over the textarea...</p>
