Question

My code :

HTML

<div style="position:relative;">
    <div class="boxImmagineResultNext"></div>
    <div class="boxImmagineResult">                
        <textarea cols="15" rows="5"></textarea>
    </div>
</div> 

CSS

.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;
}
​

jQuery

$('.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();
});​

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.

How can I fix it? I should "avoid" mousedown when I click over the textarea…

Answer 1

Using Event delegation might help because you will be able to test what the target (element which initiated the event) is or not what you want to be the trigger.

$('.boxImmagineResult').on('mousedown', function(e){
    var $target = $(e.target);
    if( $target.is('SELECTOR') ){
        // Do stuff here ...
    }
    return false;
});