我怎样才能“避免”对某些内部元素进行贬低？

Question

我的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();
});​

由于这种机制，我不能在textarea上“写”。这只是在Firefox上，例如，在Chrome上也可以。它似乎“只读”但实际上并非如此。

我该如何解决？当我点击textarea时，我应该“避免”mousedown ...

Answer 1

使用事件委派可能会有所帮助，因为您将能够测试目标（启动事件的元素）是否是您想要成为触发器的内容。

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